Vue.js Vue组件：动态使用路由器链接或href属性

我正在生成具有以下代码的菜单：

<v-list-item v-for="item in items" :key="item.title" link :to="item.to">
    <v-list-item-action>
        <v-icon>{{item.icon}}</v-icon>
    </v-list-item-action>
    <v-list-item-content>
        <v-list-item-title>{{item.title}}</v-list-item-title>
    </v-list-item-content>
</v-list-item>

data: () => ({
            items: [
                {
                    title: 'Nova Viagem',
                    to: '/viagens/cadastrar',
                    icon: 'fa-route'
                },
                {
                    title: 'Lista de Viagens',
                    to: '/viagens/listar',
                    icon: 'fa-list'
                },
                {
                    title: 'Sair',
                    href: '/logout',
                    icon: 'fa-sign-out-alt'
                }
            ]
        })

差不多

item.to ? :to="item.to" : href="item.href" //if item has to, use to, else use href

---

有可能吗？

如果

:href

道具在那里，它将生成一个正常链接，如果

:to

在那里，它将呈现一个路由器链接。您应该能够在

v-list-item

中使用

：to

和

：href

，而无需任何条件逻辑

       <v-list-item v-for="item in items" :key="item.title" link 
                :to="item.to" 
                :href="item.href">
                 ...
       </v-list-item>

...

       <v-list-item v-for="item in items" :key="item.title" link 
                :to="item.to" 
                :href="item.href">
                 ...
       </v-list-item>