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

Question

如何将一个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 }"

但它不起作用.

Answer 1

您必须使用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中我们在kebab-case中编写属性名称,但在Vue中我们在camelCase中编写它.更多关于官方文档的信息.

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

Answer 2

我刚刚做了这个,它对我很有用.使用Laravel 5.4和Vue 2.x.

在我的组件中,声明对象的属性(props):

props: ['currentUser'],

在我的刀片页面上,组件被实例化:

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

请注意,在组件中,我使用的是camelCase currentUser,但由于html不区分大小写,因此必须使用kebab-case(因此,'current-user').

另请注意,如果您使用刀片语法,{{ }}则之间的数据通过php运行htmlspecialchars.如果你想要未编码的数据(在这种情况下你可以),那么使用{!! !!}

Answer 3

对于遇到此线程但仍然出现错误的任何人，Mustafa Ehsan 在上面给出了正确的答案，但没有解释。反复试验帮助我看到了它。

我在 newuser.blade.php 中的组件

<access-request
       firstname="{{ $newuser->firstname }}"
       lastname="{{ $newuser->lastname }}"
       accessid="{{ $newuser->id }}"
>
</access-request>

注意使用的绑定方法非常重要。在上面的组件上，我只写了数据绑定的名称（如 React props），然后将其注册到组件 props 上（见下文）。这就是穆斯塔法在他的回答中写他的绑定的方式，并且工作正常。另一种 Vue 传递 props 的方式是使用 v-bind: 或 :，但你必须确保同时使用双引号和单引号：

:firstname="'{{ $newuser->firstname }}'"

如果没有两个引号，您会收到 Vue 警告。

访问请求.vue：

<template>
   <div class="component">
        <h3 class="">{{ firstname }} {{ lastname }}</h3>
        <p>Access ID: {{ accessid }}</p>
        <label for="administrator">Grant Administrator Priviledges:</label>
        <input name="administrator" type="checkbox" value="True" class="mb-5"><br>
        <button type="submit" class="btn btn-success">Add</button>
        <button type="submit" class="btn btn-danger">Delete</button>
        <hr>
   </div>
</template>

<script>
  export default {
    name: "AccessRequest",
    props: ['firstname', 'lastname', 'accessid'],
  }
</script>