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

php vue.js vuejs2 laravel

2022-08-30 14:50:07

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

在我的示例中，我有一个内联模板客户端详细信息，我从中获取此视图，因此现在我想将URL附带的url传递给我的实例。Laravelid/client/1Vue

我的组件由加载，如下所示：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 }"

但它不起作用。

答案 1

你必须使用 Vue 才能通过标记将属性传递给 Vue 的组件。请看以下示例：props

<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中，我们用kebab-case编写属性名称，但在Vue端，我们用camelCase编写它。有关官方文档的更多信息，请单击此处。

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

答案 2

我刚刚这样做了，它对我来说效果很好。使用Laravel 5.4和Vue 2.x。

在我的组件中，为对象声明一个属性（props）：

props: ['currentUser'],

在实例化组件的边栏选项卡页上：

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

请注意，在组件中，我使用的是 camelCase for ，但由于 html 不区分大小写，因此您必须使用 kebab-case（因此，“当前用户”）。currentUser

另请注意，如果使用刀片语法，则之间的数据将通过 php 运行。如果你想要未编码的数据（在这种情况下，你会这样做），那么使用{{ }}htmlspecialchars{!! !!}