在<a>标签的href中写VueJS数据绑定表达式

Question

我在 Laravel 5.3 中使用 VueJS 2.0。我有 Vue 数组数据（例如 items）。现在我想使用 v-for 在 table 中呈现这些数据。在 table 中，有一个按钮可以将页面重定向到项目详细信息页面。为此，我在标签的 href 中写下我的静态 URL 直到 /。然后我追加 {{item.id}}。但是我收到了这个错误。

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use <div :id="val">

所以我不知道如何在<a href="">中编写VueJS的数据绑定表达式。如果有人知道解决方案，将不胜感激。

这是我的代码。

我的-items.blade.php

<div id="app">
....
    <tr v-for="item in items">
        <td>
            <a href="{{url('/item')}}/@{{item.id}}">view</a>
        </td>
    </tr>
....
</div>

我的-items.js

new Vue({
    el: '#app',
    data: {
        items: [
            {id: 1},
            {id: 2},
            {id: 3}
        ]
    },
})

编辑

这是我在 AngularJS 和 Laravel 5.2 中所做的。我想要类似这样的东西。

<a href="{{url('/item')}}/@{{item.id}}">view</a>

Answer 1

应该如下所示：

<tr v-for="item in items">
    <td>
        <a :href="'{{url('/item')}}/' + item.id" />
    </td>
</tr>

Answer 2

如果你不想保持固定 URL 而不是相对 URL，你可以考虑这个：

<div id="app">
    <tr v-for="item in items">
        <td>
            <a :href="'{{ url('/item') }}' + '/' + @{{ item.id }}" />
        </td>
    </tr>
</div>

在<a>标签的href中写VueJS数据绑定表达式

Write VueJS data binding expression in href of <a> tag

laravel

vue.js

laravel-5.3

vuejs2

v-for