Я создал компонент 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 передавалось в функцию route() laravel?
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
изменяются вызовом функции