CODEWITHSUNDEEP
vuejs2
user7342807
user7342807

Reputation: 313

vuejs2 not evaluating variable inside double quotes

I have a loop like this: 

 <ul class="menu-list" v-for="artist in artists">
   <li> <a href="/artist/{{artist.artist}}">{{ artist.artist }}</a> </li>
 </ul>

everything in my code works well, but the /artist/{{artist.artist}} part isn't evaluated. I just get something like /artist/%7B%7Bartist.artist%7D%7D

In vue 1.x it used to work well, but not in vue2

Upvotes: 2

Views: 3463

Answers (3)

Traxo
Traxo

Reputation: 19002

Because it doesn't work like that in v2 anymore: https://v2.vuejs.org/v2/guide/migration.html#Interpolation-within-Attributes-removed

If you don't want to change code too much then this should do:

<a :href="'/artist/' + artist.artist">

However, if you are using vue-router then you should use <router-link> instead of <a>

Upvotes: 4

Prakhar Gyawali
Prakhar Gyawali

Reputation: 555

i hope you have solved your problem but if not this is the way you can do it. you need to call a method in your vue which will return the value for your link.

<ul class="menu-list" v-for="artist in artists">
   <li> <a :href="artistlink(artist.artist)">{{ artist.artist }}/a> </li>
 </ul>

now in your method section make a method like this

methods: {
    artistlink(value){
            if(value==null ||value=='') return ;
            return '/artist/'+value;
        },  

}

The above function also works for numeric loops.

Upvotes: 0

Mahfuzhur Rahman
Mahfuzhur Rahman

Reputation: 68

you can try this one as i have solved my problem using this

<ul class="menu-list" v-for="artist in artists">
   <li> <a :href='"/artist/" + artist.artist'>@{{ artist.artist }}</a> </li>
 </ul>

Upvotes: 0

Related Questions