Laravel Blade Template将数据传递给Vue JS组件

Question

我在使用Vuejs~1.0将属性从Laravel Blade模板传递给子组件时遇到问题。如果我以纯文本传递内容它可以正常工作，但是当我尝试传递js属性，数组或对象时它根本不起作用。我目前有一个带有自定义组件的刀片文件，如下所示：

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

如果我遗漏@{{ }}，唯一会传递的是字符串stuff，如果我遗漏了@，我显然会收到刀片错误，但是如果我使用@{{ 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>