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>