如何将 PHP 变量的值传递给 Laravel 刀片文件中的 Vue 组件?
在我的示例中,我有一个内联模板客户端详细信息,我从 Laravel
得到这个视图,所以现在我想通过 id
附带 url /client/1
到我的 Vue
实例。
我的组件由 Laravel
加载,看起来像:
<client-details inline-template>
<div id="client-details" class="">
My HTML stuff
</div>
</client-details>
并安装:
Vue.component('client-details', {
data(){
return {
clientId: null
}
},
);
我已经试过了
:clientId="{{ $client->id }"
但它不起作用。
原文由 mastercheef85 发布,翻译遵循 CC BY-SA 4.0 许可协议
您必须使用 Vue 的
props
才能通过标记将属性传递给 Vue 的组件。看看下面的例子:在您的 Vue 组件中:
现在在 Vue 组件的其他部分,您可以通过
this.clientId
访问此值。问题详情
请注意,在 HTML 中我们用 kebab-case 写属性名称,但在 Vue 中我们用 camelCase 写它。 官方文档中的更多信息在这里。
此外,您正在使用 Vue 的
v-bind
在:clientId="{{ $client->id }}"
--- 中的简写,这意味着 Vue 会将双引号内的任何内容作为 JavaScript 表达式处理,因此在这种情况下您也可能会遇到错误。相反,您应该使用这种格式clientId="{{ $client->id }}
不带冒号。