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

2
votes

I'm using VueJS 2.0 with Laravel 5.3. I have Vue array data (e.g, items). Now I want to render those data in table using v-for. In table, there is a button to redirect page to item details page. For that, I'm writing my static URL till / in href of tag. Then I'm appending {{item.id}}. But I'm getting this error.

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

So I can't get that how to write data binding expression of VueJS in <a href="">. If anyone knows the solution, it will be appreciated.

Here is my code.

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}
        ]
    },
})

EDIT

Here is what I was doing in AngularJS with Laravel 5.2. And I want similar like this.

<a href="{{url('/item')}}/@{{item.id}}">view</a>
2
laravelvue.jslaravel-5.3vuejs2v-for

2 Answers

2
votes

It should be like following:

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

If you wan't to maintain fixed URL rather than relative URL, you may consider this one:

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