Vue 与 Laravel，传递 null 道具答案

【问题标题】：Vue with Laravel, passing null propsVue 与 Laravel，传递 null 道具
【发布时间】：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？

【问题讨论】：

【解决方案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: () => {},
    }
},

【讨论】：

【解决方案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>

【讨论】：