0

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

2 ответа 2

1

Для начала, думаю, нужно прояснить один важный момент. Шаблонизатор (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, думаю, ненужен.

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>
5
  • undefined variable 24 сен 2020 в 13:47
  • может искать другой подход? 24 сен 2020 в 13:51
  • к тому же, id это ведь свойство объекта vue 24 сен 2020 в 13:54
  • обновил вопрос. посмотрите 24 сен 2020 в 13:58
  • Так а чем этот объект вызывается? Нужно в этот файл и прокидывать $id
    – TheMY3
    24 сен 2020 в 14:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.