Laravel Blade 模板将数据传递给 Vue JS 组件答案

【问题标题】：Laravel Blade Template passing data to Vue JS componentLaravel Blade 模板将数据传递给 Vue JS 组件
【发布时间】：2016-02-05 19:49:37
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

看来我刚刚想通了，好像是我在视频前漏掉了冒号，所以应该是这样的：

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

【讨论】：

【解决方案2】：

如果您将变量传递给组件，请使用：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：