Как передать значение из данных 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">

— asemahle
источник

1

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

— bbennett36

2

Нужно было "+". Это сработало <a :href="'/job/' + r.id"> {{r.job_title}} </a>

— bbennett36

59

Или вы можете сделать это с литералом шаблона ES6:

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

— Ardhi
источник

0

Если вы хотите отображать ссылки из вашего штата или магазина в Vue 2.0, вы можете сделать это следующим образом:

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

— Вакар Шахид
источник