Search code examples
vue.jshref

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?

Solution

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

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

    or 

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