Як передати значення з даних Vue в href?

142

Я намагаюся зробити щось подібне:

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

Я не можу зрозуміти, як додати значення r.idдо кінця hrefатрибуту, щоб я міг здійснити виклик API. Будь-які пропозиції?

vue.js vue-router

— bbennett36
джерело

320

Вам потрібно використовувати v-bind:або його псевдонім :. Наприклад,

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

або

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

— асемахле
джерело

1

Я отримую помилку компіляції з обома, хоча це повинно працювати. Можливо, у нього є проблема, оскільки вона знаходиться всередині v-for?

— bbennett36

2

Потрібно було "+". Це працювало <a :href="'/job/' + r.id"> {{r.job_title}} </a>

— bbennett36

59

Або ви можете зробити це за допомогою буквального шаблону ES6:

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

— Ардхі
джерело

0

Якщо ви хочете відобразити посилання, що надходять із вашого штату чи зберігаються у Vue 2.0, ви можете зробити так:

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

— Вакар Шахід
джерело