260

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?

5 Answers 5

546

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

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

or

<a :href="'/job/' + r.id">
Sign up to request clarification or add additional context in comments.

5 Comments

Im getting a compile error with both even though it should work. Maybe it has there is a problem since it is inside a v-for?
It needed a "+". This worked <a :href="'/job/' + r.id">{{ r.job_title }}</a>
In my case I wanted to prevent click on the tr from a table when I clicking in an ' href` without a method. I used .self in the ' td` and moved the method from the tr' to each td`. Check it out: stackoverflow.com/questions/68838076/…
In vue3 for href binding I use following in v-for loop: <a :href="/url/${categoryId}">{{ item.title }}</a>
@IrfanAshraf It's worth noting that there need to be tick marks `` just inside of the double quotes, but otherwise this works.
111

Or you can do that with ES6 template literal:

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

Comments

9

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>

Comments

3

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>

Comments

2

This can also help.

<a target="_blank" :href="r.reg_metadato">{{ r.reg_metadato }}</a>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.