I m trying to do something like this lt div v-for r in rentals gt lt a bind-href job r id gt r job title lt a gt lt div gt I can t figure out how to add the value of r id to the end of the href attribute so that I can make an API call Any suggestions

You need to use v-bind or its alias For example lt a v-bind href job r id gt or lt a href job r id gt

Or you can do that with ES6 template literal lt a href job r id

[vue.js] How to pass a value from Vue data to href?

I'm trying to do something like this:

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

I can't figure out how to add the value of r.id to the end of the href attribute so that I can make an API call. Any suggestions?

This question is related to vue.js vue-router

You need to use v-bind: or its alias :. For example,

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

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

Or you can do that with ES6 template literal:

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

If you want to display links coming from your state or store in Vue 2.0, you can do like this:

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