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

【问题标题】：Write VueJS data binding expression in href of <a> tag在 <a> 标签的 href 中编写 VueJS 数据绑定表达式
【发布时间】：2017-05-05 05:24:48
【问题描述】：

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

属性内的插值已被删除。使用 v-bind 或而是冒号的简写。例如，代替 , 使用<div :id="val">

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

这是我的代码。

my-items.blade.php

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

my-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>

【问题讨论】：

标签： laravel vue.js laravel-5.3 vuejs2 v-for

【解决方案1】：

应该是这样的：

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

【讨论】：

我已按照您的回答 <a :href="{{url('/item')}}/@{{item.id}}">view</a> 完成此操作。但现在收到此错误failed to compile template:
您的回答有效。但我想要一些像我在你的回答中评论过的东西。这样一来，它就没有用了。
它适用于此。 <a :href="'{{url('/item')}}/' + item.id">view</a>

【解决方案2】：

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

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

【讨论】：

我已按照您的回答 <a :href="'{{url('/item')}}' + '/' + @{{item.id}}">view</a> 完成此操作。但现在收到此错误failed to compile template:
是的，我想要你回答的那种东西。但不工作。