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

Question

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

在我的示例中，我有一个内联模板客户端详细信息，我从 Laravel 获得了这个视图，所以现在我想传递 url 附带的 id /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. official docs here.

中的更多信息

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

Answer 2

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

在我的组件中，为 object:

声明一个属性 (props)

props: ['currentUser'],

在我实例化组件的 blade 页面上：

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

请注意，在组件中，我对 currentUser 使用了驼峰式命名法，但由于 html 是 case-insensitive，您必须使用 kebab-case（因此，'current-user').

另请注意，如果您使用 blade 语法 {{ }}，则之间的数据为运行到 php htmlspecialchars。如果你想要未编码的数据（在这种情况下你会），然后使用 {!! !!}

Answer 3

我必须将一些服务器数据传递到我的 Vue 组件，我最终在控制器中创建了一个 $server_data 变量并将其传递到 json 脚本标记中。

在控制器中：

$server_data = json_encode([
    "some-data" => SomeObject::all()
]);

return View::make('myview', compact('server_data'));

在模板中：

<script type="application/json" name="server-data">
    {{ $server_data }}
</script>
<!-- Inserts server data into window.server_data -->
<script>
    var json = document.getElementsByName("server-data")[0].innerHTML;
    var server_data = JSON.parse(json);
</script>

在vue初始化中，我放了一个计算的属性:

computed: {
    'server_data': function(){
        return window.server_data;
    }
}

然后，可以使用 server_data.some_object 在组件模板中访问数据。

这允许在不需要许多 html 属性的情况下传递大量结构化数据。另一个好处是数据通过 json 编码转义。这避免了包含双引号 (") 的变量的潜在错误，这会弄乱 dom.

Answer 4

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

我的组件在 newuser.blade.php

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

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

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

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

AccessRequest.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>

Answer 5

通常将 php 变量传递给 vue 我会这样做

<component-name :prop-name='@json($variable)'></component-name>

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

How to pass a PHP variable to Vue component instance in Laravel blade?

php

laravel

vue.js

vuejs2