我创建了一个像这样的 vue 组件:
Vue.component("modal", {
props: ["description", "header", "closeFunction", "detailLink"],
template: "<transition name='bounce'>" +
"<div class='wrapper' @click='closeFunction'>" +
"<div class='container'>" +
"<div class='close_button' @click='closeFunction'></div>" +
"<h3>{{ header }}</h3>" +
"<div class='content'>{{ description | truncate(300) }}</div>" +
"<a v-bind:href='detailLink' class='custom-btn btn-1'>Подробнее</a>" +
"</div></div>" +
"</transition>"
});
并尝试在页面上使用它:
<modal v-show="show"
v-bind:header="header"
v-bind:description="description"
v-bind:close-function="closeModal"
v-bind:detail-link="{{ route("detail-page", id) }}"> // ошибка
</modal>
从组件的调用中可以看出,我正在尝试使用该函数route()
并将Laravel
第二个参数传递给它id
位于$data.id
( data: { id: ... }
) 中的属性,以便web.php
使用Route::get("/detail/{id}"...)
. 正因为如此,它laravel
自然会产生错误"id" is not defined
。我在文档中没有找到任何东西。
如何使 vue 对象属性传递给 laravel route() 函数?
UPD:vue.js 对象
let modal = new Vue({
el: "#modal",
data: {
header: '',
description: '',
id: 0, // вот это свойство нужно использовать как второй аргумент route()
show: false
},
methods: {
closeModal() {
this.show = false;
}
}
});
属性值header
, description
, id
,show
通过调用函数来改变
如果在刀片模板中调用它,那么很可能问题出在语法上,试试这个:
首先,我认为我们需要澄清一个重要的观点。模板引擎(刀片)在 php 服务器端处理,vue(js) 在客户端处理。因此,
route
将参数从 vue 传递给函数是行不通的。想到的第一个解决方案是:在
route
我们传递一个参数,然后我们将在 vue 组件中将其替换为所需的 id。然后在组件中创建一个方法或计算属性,我们将在其中将“xxx”更改为所需的 id。在那里你需要返回类似的东西
您可以放置自己的子字符串而不是 xxx。这种方法有很多缺点,但是很简单。
然而,由于你传递的是一个字符串,所以我认为 v-bind 是不必要的。