Wie übergebe ich einen Wert aus Vue-Daten an href?

141

Ich versuche so etwas zu tun:

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

Ich kann nicht herausfinden, wie der Wert von r.idam Ende des hrefAttributs hinzugefügt werden soll, damit ich einen API-Aufruf durchführen kann. Irgendwelche Vorschläge?

vue.js vue-router bbennett36
quelle

Antworten:

318

Sie müssen v-bind:oder seinen Alias ​​verwenden :. Beispielsweise,

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

oder 

<a :href="'/job/' + r.id">
asemahle
quelle
1
Ich bekomme einen Kompilierungsfehler mit beiden, obwohl es funktionieren sollte. Vielleicht hat es ein Problem, da es sich in einem V-For befindet?
Bbennett36
2
Es brauchte ein "+". Dies funktionierte <a :href="'/job/' + r.id"> {{r.job_title}} </a>
bbennett36
58

Oder Sie können dies mit dem ES6-Vorlagenliteral tun:

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

Wenn Sie Links anzeigen möchten, die aus Ihrem Bundesstaat oder Geschäft in Vue 2.0 stammen, haben Sie folgende Möglichkeiten:

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

Waqar Shahid
quelle