时间戳

首页 > 解决方案 > Vue 与 Laravel，传递 null 道具

javascript - Vue 与 Laravel，传递 null 道具

问题描述

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

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

道具定义如下：

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 吗？

标签： javascriptlaravelvue.jsvuejs2vue-router

解决方案

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

无论如何，如果$user为空，{{ $user }}则转换为空，因此您最终得到 

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

这是一个空字符串。

您可以不指定类型，如下所示：

props   : ['user'],

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

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

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

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

推荐阅读