![](/img/trans.png)
[英]How to pass an array of routes from blade.php to a Vue component in Laravel
[英]How to pass a PHP variable to Vue component instance in Laravel blade?
如何将 PHP 变量的值传递给 Laravel 刀片文件中的 Vue 组件?
在我的示例中,我有一个内联模板客户端详细信息,我从Laravel
获得了这个视图,所以现在我想将 url /client/1
附带的id
传递给我的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 中我们用kebab-case写属性名称,但在 Vue 中我们用camelCase写它。 官方文档中的更多信息在这里。
此外,您在:clientId="{{ $client->id }}"
中使用了 Vue 的v-bind
简写,这意味着 Vue 会将双引号内的任何内容作为 JavaScript 表达式处理,因此在这种情况下您也可能会遇到错误. 相反,您应该使用不带冒号的格式clientId="{{ $client->id }}
。
我只是这样做了,它对我来说非常有用。 使用 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
运行。 如果你想要未编码的数据(在这种情况下你会),然后使用{!! !!}
{!! !!}
对于遇到此线程并且仍然遇到错误的任何人,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>
我必须将一些服务器数据传递给我的 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。
通常将php变量传递给vue我会做
<component-name :prop-name='@json($variable)'></component-name>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.