Laravel Blade 向 Vue JS 组件传递数据的模板

Question

我在使用 Vuejs ~1.0 将属性从 Laravel Blade 模板传递到 child 组件时遇到问题。如果我以纯文本形式传递某些内容，它工作得很好，但是当我尝试传递 js 属性、数组或 object 时，它根本不起作用。我目前有一个带有自定义组件的 blade 文件，如下所示：

<my-component video="@{{ stuff }}"></my-component>

如果我省略 @{{ }} 唯一会被传递的是字符串 stuff，如果我省略 @，我显然得到一个 blade 错误，但是如果我使用 @{{ stuff }}，那么我得到的只是字符串 {{ stuff }}。我显然遗漏了一些东西，但不知道我哪里出错了。提前致谢。

Answer 1

看来我刚刚弄明白了，好像我在视频之前漏掉了冒号，所以它应该是这样的：

<my-component :video="stuff"></my-component>

Answer 2

如果要将变量传递给组件，则使用：

<my-component :video= "{{ json_encode($stuff) }}" ></my-component>

不要忘记 双引号 否则结果对于对象之类的东西是不可预测的。

Answer 3

如果您要传递模型，请执行以下操作：

<my-component :video="{{ $stuff->toJson() }}" inline-template></my-component>

Laravel Blade Template passing data to Vue JS component