主页 / 问题 / 1182001
Accepted
midnightelf18
Asked:2020-09-24 21:38:17 +0000 UTC2020-09-24 21:38:17 +0000 UTC

如何将参数从 vue 传递给 laravel route()

  • 772

我创建了一个像这样的 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通过调用函数来改变

javascript

2 个回答

  1. 如果在刀片模板中调用它，那么很可能问题出在语法上，试试这个：

    <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>
    • 1
  2. Best Answer

    首先，我认为我们需要澄清一个重要的观点。模板引擎（刀片）在 php 服务器端处理，vue(js) 在客户端处理。因此，route将参数从 vue 传递给函数是行不通的。

    想到的第一个解决方案是：在route我们传递一个参数，然后我们将在 vue 组件中将其替换为所需的 id。

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

    然后在组件中创建一个方法或计算属性，我们将在其中将“xxx”更改为所需的 id。在那里你需要返回类似的东西

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

    您可以放置​​自己的子字符串而不是 xxx。这种方法有很多缺点，但是很简单。

    然而，由于你传递的是一个字符串，所以我认为 v-bind 是不必要的。

    • 1

相关问题