如何将 PHP 变量传递给 Laravel Blade 中的 Vue 组件实例？

如何将 PHP 变量的值传递给 Laravel Blade 文件中的 Vue 组件？

在我的示例中，我有一个内联模板客户详细信息，我从以下位置获取此视图Laravel所以现在我想通过id带有 url 的/client/1 to my 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 }"

但它不起作用。

你必须使用Vue的props能够通过标记将属性传递给 Vue 的组件。看一下下面的例子：

<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

在你的 Vue 组件中：

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

现在，在 Vue 组件的其他部分，您可以访问该值：this.clientId.

问题详情

请注意，在 HTML 中，我们将属性名称写入烤肉串盒但在 Vue 方面我们把它写在骆驼香烟盒。更多信息在官方文档在这里 https://v2.vuejs.org/v2/guide/components.html#Passing-Data-with-Props.

另外，你正在使用 Vue 的v-bind简写:clientId="{{ $client->id }}"这意味着 Vue 会将双引号内的任何内容作为 JavaScript 表达式处理，因此在这种情况下您也可能会遇到错误。相反，您应该使用这种格式clientId="{{ $client->id }}没有冒号。