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

Question

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?

Answer 1

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;
}