javascript - Laravel 5.3 和 Vue 2

Question

我正在新的 Laravel 5.3 应用程序中使用 Vue 2，但我不确定如何以 laravel 格式绑定(bind) URL。

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

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

Vue 文档说要绑定(bind)到另一个函数，如下所示:

<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 未定义。

我如何完成这个(简单)任务？

Answer 1

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