php变量传递给vue,如何将PHP变量传递给Laravel刀片中的Vue组件实例？

如何将一个PHP变量的值传递给Laravel刀片文件中的Vue组件？

在我的示例中,我有一个内联模板客户端详细信息,我从Laravel获取此视图,所以现在我想将url / client / 1附带的id传递给我的Vue实例.

我的组件由Laravel加载,看起来像：

My HTML stuff

并安装：

Vue.component('client-details', {

data(){

return {

clientId: null

}

},

);

我已经尝试过了

:clientId="{{ $client->id }"

但它不起作用.

解决方法:

你必须使用Vue的道具才能通过标记将属性传递给Vue的组件.看一下下面的例子：

My HTML stuff

在你的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