Как передать в laravel route() параметр от vue

Question

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

Answer 1

Если вызывается в blade шаблоне, то скорее всего проблема в синтаксисе, попробуйте так:

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

Answer 2

Для начала, думаю, нужно прояснить один важный момент. Шаблонизатор (blade) обрабатывается на стороне php сервера, а vue(js) на стороне клиента. Поэтому в функцию route не выйдет передать параметр из vue.

Первое решение, которое пришло в голову такое: В route передаем параметр, который потом заменим на нужный id во vue-компоненте.

<modal v-show="show"
    v-bind:header="header"
    v-bind:description="description"
    v-bind:close-function="closeModal"
    detail-link="{{ route('detail-page', 'xxx') }}"></modal>

Потом в компоненте создаем метод или вычисляемое свойство, где будем менять ‘ххх’ на нужный id. Там нужно будет вернуть что-то вроде

getDetailLinkWithId(){
    return this.detailLink.replace('xxx', this.id);
},

Вместо ххх можете поставить свою подстроку. Минусов у этого метода много, но он прост.

И еще, раз уж Вы передаете строку, то v-bind, думаю, ненужен.

БЛОГ НА HUSL

Как передать в laravel route() параметр от vue

Ответы (2 шт):