How to pass a value from Vue data to href?

Question

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?

score 521 · Accepted Answer · edited Dec 01 '16 at 02:04

521

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

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

or

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

edited Dec 01 '16 at 02:04

Saurabh

answered Nov 30 '16 at 22:52

asemahle

2

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? – bbennett36 Nov 30 '16 at 23:00
3

It needed a "+". This worked {{ r.job_title }} – bbennett36 Nov 30 '16 at 23:12
I ran into this same problem 4 years later and this answer solved it for me again. Thanks! – bbennett36 Jan 21 '21 at 16:49
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: https://stackoverflow.com/questions/68838076/how-to-ignore-that-clicking-on-a-td-tag-does-not-automatically-redirect-me-to-an/74465289#74465289 – JotaPardo Nov 16 '22 at 18:15
In vue3 for href binding I use following in v-for loop: {{ item.title }} – Irfan Ashraf Jul 28 '23 at 10:04

score 102 · Answer 2 · answered Jul 13 '17 at 06:01

102

Or you can do that with ES6 template literal:

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

answered Jul 13 '17 at 06:01

Ardhi

score 6 · Answer 3 · answered Feb 18 '22 at 18:02

6

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>

answered Feb 18 '22 at 18:02

Khalid Ibrahim

score 2 · Answer 4 · edited Nov 02 '21 at 09:29

2

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>

edited Nov 02 '21 at 09:29

Penny Liu

answered Apr 23 '18 at 11:29

score 1 · Answer 5 · answered Dec 14 '21 at 23:07

1

This can also help.

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

answered Dec 14 '21 at 23:07

fcva

5 Answers5