[Vuejs]-Vuetify : Navbar open specific links in new tabs

1👍

I don’t know which version of vuetify you are using, but in the documentation for v-list-item you’ve got 2 useful props :

  • href -> Use your link.route variable here
  • target -> You should try with the value "_blank" (this value mean to open the link in a new tab, in html – see here)

About what you tried, change it to that :

<v-list-item v-for="link in links" :key="link.text" :href="link.route" :target="link.newTab ? '_blank' : ''">

-2👍

For greater cleaning in template I usually create a method in these cases. Then your v-list-item may be:

<v-list-item v-for="link in links" :key="link.text" @click="go(link)">

And run with this method:

go(link){
    if(!link.newTab){ 
         this.$router.push({ path: link.route })
    }
    else{
         window.open(link.route)
    }
},
👤jssDev

Leave a comment