CODEWITHSUNDEEP
vue.jshref
bbennett36
bbennett36

Reputation: 6345

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?

Upvotes: 259

Views: 317064

Answers (5)

Khalid Ibrahim
Khalid Ibrahim

Reputation: 154

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>

Upvotes: 9

fcva
fcva

Reputation: 449

This can also help.

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

Upvotes: 2

Muhammad Waqar Shahid
Muhammad Waqar Shahid

Reputation: 141

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>

Upvotes: 3

Ardhi
Ardhi

Reputation: 3035

Or you can do that with ES6 template literal:

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

Upvotes: 111

asemahle
asemahle

Reputation: 20795

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

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

or 

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

Upvotes: 545

Related Questions