When the div is clicked, jump to the Vue method of the url defined in data

Question

I have this kind of object in my array:

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

When the div is clicked, I want to point the window.location.href to the url, but I can't seem to get the url from the data into my method.

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

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

Does anyone have any suggestions?

Answer 1

The accepted answer works but will refresh the page. In the SPA framework, we try to avoid refreshing the page, so the correct answer is:

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

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

Answer 2

You need to pass person as a parameter to select, not $event:

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

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