Jak przekazać wartość z danych Vue do href?

142

Próbuję zrobić coś takiego:

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

Nie mogę dowiedzieć się, jak dodać wartość atrybutu r.idna końcu, hrefaby móc wykonać wywołanie interfejsu API. Jakieś sugestie?

vue.js vue-router

— bbennett36
źródło

Odpowiedzi:

320

Musisz użyć v-bind:lub jego aliasu :. Na przykład,

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

lub

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

— asemahle
źródło

Otrzymuję błąd kompilacji z obydwoma, mimo że powinien działać. Może jest jakiś problem, skoro jest wewnątrz v-for?

— bbennett 36

Potrzebował „+”. To zadziałało <a :href="'/job/' + r.id"> {{r.job_title}} </a>

— bbennett36

Lub możesz to zrobić za pomocą literału szablonu ES6:

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

— Ardhi
źródło

Jeśli chcesz wyświetlać linki pochodzące z Twojego stanu lub sklepu w Vue 2.0, możesz zrobić tak:

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

— Waqar Shahid
źródło

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.

Licensed under cc by-sa 3.0 with attribution required.