How to pass a value from Vue data to href?
vue.jsHrefvue.js Problem Overview
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?
vue.js Solutions
Solution 1 - vue.js
You need to use v-bind: or its alias :. For example,
<a v-bind:href="'/job/'+ r.id">
or
<a :href="'/job/' + r.id">
Solution 2 - vue.js
Or you can do that with ES6 template literal:
<a :href="`/job/${r.id}`"
Solution 3 - vue.js
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>
Solution 4 - vue.js
This can also help.
<a target="_blank" :href="r.reg_metadato">{{ r.reg_metadato }}</a>
Solution 5 - vue.js
You can concatenate your static value and dynamic value as string values, while binding href. Using your example:
<div v-for="r in rentals">
<a :href="'/job/' + r.id"> {{ r.job_title }} </a>
</div>