I have a navbar component that looked sth like this.

There are 2 menu options that I need to open in a new tab.

<template>
    <nav>
        <v-app-bar text app color="blue">
            <v-app-bar-nav-icon  @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-app-bar-title >
                <!-- <span >Vi3</span>
                <span>Global</span> -->
            </v-app-bar-title>
        </v-app-bar>

        <v-navigation-drawer v-model="drawer" app >
            <v-list>
                <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
                    <v-list-item-action>
                        <v-icon>{{ link.icon }}</v-icon>
                    </v-list-item-action>

                    <v-list-item-content>
                        <v-list-item-title> {{ link.text }} </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </nav>
</template>
<script>
export default {
    data() {
        return {
            drawer: true,
            links: [
                { icon: 'dashboard', text: 'Dashboard', route: '/dashboard', newTab: false },
                { icon: 'leaderboard', text: 'Stats', route: 'https://www.google.com ', newTab: true },
                { icon: 'qr_code_scanner', text: 'QR Codes', route: '/qr-codes', newTab: false },
                { icon: 'tungsten', text: 'Campaigns', route: '/Campaigns', newTab: false },
                { icon: 'link', text: 'URL Groups', route: '/url-groups', newTab: false },
                { icon: 'settings', text: 'Settings', route: '/settings', newTab: false },
                { icon: 'support', text: 'Support', route: 'https://youtube.com', newTab: true },
                { icon: 'exit_to_app', text: 'Logout', route: '/' }
            ]
        }
    },
    methods: {
        created() {
            if (this.link.text == 'Support') {
                console.log('Support')
            }
        }
    }
}
</script>

How do I add a logic and catch that?

I tried put the URL in it, it kept adding / in front of it which lead to this

Any hints for me ?

I tried

<v-list-item v-for="link in links" :key="link.text" router :to="link.route" target="link.text == 'Support' ? '_blank' : '']">

It doesn’t look so cleaned, and the extra / still there.. :(

CodePudding user response：

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' : ''">

CodePudding user response：

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)
    }
},