Comment passer une valeur des données Vue à href?

142

J'essaye de faire quelque chose comme ça:

<div v-for="r in rentals">
  <a bind-href="'/job/'r.id"> {{ r.job_title }} </a>
</div>

Je n'arrive pas à comprendre comment ajouter la valeur de r.idà la fin de l' hrefattribut pour pouvoir effectuer un appel API. Aucune suggestion?

vue.js  vue-router 
— bbennett36
source

Réponses:

320

Vous devez utiliser v-bind:ou son alias :. Par exemple,

<a v-bind:href="'/job/'+ r.id">

ou 

<a :href="'/job/' + r.id">
— asemahle
source
1
Je reçois une erreur de compilation avec les deux même si cela devrait fonctionner. Peut-être y a-t-il un problème car il est à l'intérieur d'un v-for?
— bbennett36
2
Il fallait un "+". Cela a fonctionné <a :href="'/job/' + r.id"> {{r.job_title}} </a>
— bbennett36
59

Ou vous pouvez le faire avec le modèle littéral ES6:

<a :href="`/job/${r.id}`"
— Ardhi
source
0

Si vous souhaitez afficher des liens provenant de votre état ou de votre magasin dans Vue 2.0, vous pouvez faire comme ceci:

<a v-bind:href="''"> {{ url_link }} </a>

— Waqar Shahid
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.