如何将一个PHP变量的值传递给Laravel刀片文件中的Vue组件?
在我的示例中,我有一个内联模板客户端详细信息,我从Laravel获取此视图,所以现在我想将url / client / 1附带的id传递给我的Vue实例.
我的组件由Laravel加载,看起来像:
并安装:
Vue.component('client-details', {
data(){
return {
clientId: null
}
},
);
我已经尝试过了
:clientId="{{ $client->id }"
但它不起作用.
解决方法:
你必须使用Vue的道具才能通过标记将属性传递给Vue的组件.看一下下面的例子:
在你的Vue组件中:
Vue.component('client-details', {
props: [
{
name: 'clientId',
default:0,
}
]
});
现在,在Vue组件的其他部分中,您可以像this.clientId一样访问此值.
问题详情
请注意,在HTML中我们在kebab-case中编写属性名称,但在Vue中我们在camelCase中编写它.更多信息在official docs here.
此外,您正在使用Vue的v-bind速记:clientId =“{{$client-> id}}”这意味着Vue会将双引号内的任何内容作为JavaScript表达式处理,因此在这种情况下您可能会收到错误好.相反,您应该使用此格式clientId =“{{$client-> id}}而不使用冒号.
标签:php,laravel,vue-js,vuejs2
来源: https://codeday.me/bug/20191001/1837519.html
|