CODEWITHSUNDEEP
vue.js
Filip Blaauw
Filip Blaauw

Reputation: 761

Vue: on div click, go to url defined in data

I have this kind of objects in an array:

{
  name: 'name1',
  url: 'http://url-1.tld'
},
{
  name: 'name2',
  url: 'http://url-2.tld'
}

On div click, I want to to a window.location.href to the url, but I can't seem to get the url from the data to my method.

<div v-for="person in persons" v-on:click="select($event)"></div>

select: function(event) {
  window.location.href( ??? )
}

Anybody have suggestions?

Upvotes: 4

Views: 19447

Answers (2)

Amir Mehrnam
Amir Mehrnam

Reputation: 53

The accepted answer works but it refreshes the page. In SPA frameworks we try to avoid refreshing the page so the correct answer is:

Vue: this.$router.push(person.url)

Nuxt: this.$router.push({ name: 'routename' })

Upvotes: 2

thanksd
thanksd

Reputation: 55664

You need to pass the person as the argument to select, not $event:

<div v-for="person in persons" v-on:click="select(person)"></div>


select: function(person) {
  window.location.href = person.url;
}

Upvotes: 10

Related Questions