Vue 与 Laravel，传递 null 道具

Posted 2023-03-14

【中文标题】Vue 与 Laravel，传递 null 道具

【英文标题】：Vue with Laravel, passing null props

【发布时间】：2020-08-28 01:44:10

【问题描述】：

是否可以传递一个空属性？我已经定义了一个采用user 道具的主组件。

<div id="app">
    <master :user=" $user "></master>
</div>

Prop 定义如下：

props   : 
    user: 
        type: Object
    
,

现在在控制器内部，如果用户通过身份验证，我将传递用户变量，否则我将传递 null：

public function index()

    $user = Auth::check() ? Auth::user() : null;
    return view('master', compact('user'));

我遇到了The value for a v-bind expression cannot be empty 的问题。即使我删除冒号以使其不绑定，我也无法做到。我还尝试明确设置不需要道具，但这些都不起作用。

能否以某种方式解决这个问题，以便我将一个空/空对象传递给 Vue？

【问题讨论】：

尝试将 props 的必需属性设置为 false。应该会解决的。

【参考方案1】：

在 JS 中 null 实际上是对象类型。但是Vue的prop检查不认为null是一个对象，见here。

无论如何，如果$user 为空， $user 将转换为空，因此您最终会得到 ​​p>

<master :user=""></master>

这是一个空字符串。

你不能指定类型，像这样：

props   : ['user'],

或者，如果您愿意，将类型指定为字符串或对象：

props   : 
    user: 
        type: [Object, String]
    
,

如果$user 为空，则创建一个空对象：

<master :user=" $user ?? '' "></master>

【参考方案2】：

您可以使用 null 作为默认值。我通常这样做。

props: 
    user: 
        type: Object,
        default: null,
    
,

缺点是，当用户从 null 更改为 object 时，您无法将其更改回 null。

当我需要清除对象时我会做什么，我使用空对象并将其设置为默认值。

props: 
    user: 
        type: Object,
        default: () => ,
    
,

【讨论】：

这是否适用于<master :user=""></master>，还是会因为 '' 不是对象类型而引发错误？

@Adam 是的，如果你把空字符串放在那里，它会抛出错误。

【参考方案3】：

虽然接受的答案给出了解决方案，但我认为使用php Null Coalescing Operator 和VUE Multiple Prop Types 可以轻松实现确切要求

例如：

VUE 组件属性更新为接受Object 和null 类型

props: 
    user: 
        type: [Object, null]
    
,

然后在刀片文件中

<div id="app">
    <master :user=" Auth::user() ?? 'null' "></master>
</div>