Laravel 5.3 和 Vue 2答案

【问题标题】：Laravel 5.3 and Vue 2Laravel 5.3 和 Vue 2
【发布时间】：2017-02-22 23:42:18
【问题描述】：

我在一个新的 Laravel 5.3 应用程序中使用 Vue 2，但我不确定如何绑定 laravel 格式的 URL。

我从数据库中提取了一些配置行，我想简单地循环显示数据，然后显示一个按钮将您带到编辑屏幕。 Vue 不支持简单地在 URL 中插入配置行的 ID，因为我正在使用以下方法遍历行：

<tr v-for="config in data">
  <td>
    <a href="/configurations/{{ config.id }}/edit">{{ config.name }}</a>
  </td>
</tr>

Vue 文档说要像这样绑定到另一个函数：

<a v-bind:href="url">

然后我有一个这样定义的 url 方法：

export default {
    mounted() {
        console.log('Component ready.')
    },
    data: function () {
        return {
            data: [config data array]
        }
    },
    computed: {
        url: function () {
            console.dir(this); // the whole component, not the row
            console.dir(this.id); // undefined
            console.dir(this.config); // undefined
            return "/configurations/" + this.config.id + "/edit" // throws error
        }
    }
}

我似乎无法获取要呈现的返回 URL，它通常会引发错误或抱怨我的 var 未定义。

我该如何完成这个（简单的）任务？

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案1】：

解决方案是忽略计算的 URL 函数，只需执行以下操作：<a :href="'/configurations/' + config.id + '/edit'">

【讨论】：