Как передать значение из данных Vue в HREF?

142

Я пытаюсь сделать что-то вроде этого:

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

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

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>

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