Запишите выражение привязки данных VueJS в href тега ‹a›

Я использую VueJS 2.0 с Laravel 5.3. У меня есть данные массива Vue (например, items). Теперь я хочу отобразить эти данные в таблице с помощью v-for. В таблице есть кнопка для перенаправления страницы на страницу сведений об элементе. Для этого я пишу свой статический URL до / в href тега. Затем я добавляю {{item.id}}. Но я получаю эту ошибку.

Удалена интерполяция внутри атрибутов. Вместо этого используйте v-bind или сокращенное обозначение двоеточия. Например, вместо <div :id="val">

Поэтому я не могу понять, как написать выражение привязки данных VueJS в <a href="">. Если кто-то знает решение, он будет оценен.

Вот мой код.

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>

vue.js laravel vuejs2 v-for laravel-5.3
person Akshay Vaghasiya    schedule 20.12.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Должно получиться так:

<tr v-for="item in items">
    <td>
        <a :href="'{{url('/item')}}/' + item.id" />
    </td>
</tr>
person Saurabh    schedule 20.12.2016
comment
Я сделал это согласно вашему ответу <a :href="{{url('/item')}}/@{{item.id}}">view</a>. Но теперь появляется эта ошибка failed to compile template: - person Akshay Vaghasiya; 20.12.2016
comment
Ваш ответ сработал. Но я хочу что-то вроде того, что я прокомментировал в вашем ответе. И в этом смысле это не сработало. - person Akshay Vaghasiya; 20.12.2016
comment
Это сработало. <a :href="'{{url('/item')}}/' + item.id">view</a> - person Akshay Vaghasiya; 20.12.2016

arrow_upward
0
arrow_downward

Если вы не хотите поддерживать фиксированный URL-адрес, а не относительный URL-адрес, вы можете рассмотреть этот вариант:

<div id="app">
    <tr v-for="item in items">
        <td>
            <a :href="'{{ url('/item') }}' + '/' + @{{ item.id }}" />
        </td>
    </tr>
</div>
person krisanalfa    schedule 20.12.2016
comment
Я сделал это согласно вашему ответу <a :href="'{{url('/item')}}' + '/' + @{{item.id}}">view</a>. Но теперь появляется эта ошибка failed to compile template: - person Akshay Vaghasiya; 20.12.2016
comment
И да, я хочу что-то вроде того, на что вы ответили. Но не работает. - person Akshay Vaghasiya; 20.12.2016