我无法正确使用v-for指令呈现router-link。无法在vuejs上使用路由器链接和v-v动态绑定路径
我想要的是,我想要的侧面菜单有一个链接,引导用户到网页对应的侧边菜单元素的名称。
所以,如果元素是'HOME',它应该导致
myproject.com/HOME。
然而,不知何故,成为
myproject.com/Campaign/Campaign/Campaign/HOME
呈现时。
我从字面上不知道发生了什么,我在寻求帮助。
<div id="side">
<v-navigation-drawer
fixed
clipped
app
v-model="drawer"
>
<v-list dense>
<template v-for="x in item">
<div id="no-child" v-if="!x.children">
<router-link :to="{ path: x.title }">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{x.title}}v-list-tile-title>
v-list-tile-content>
v-list-tile>
router-link>
<v-divider>v-divider>
div>
<div id="with-child" v-else-if="x.children">
<v-list-gruop>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{x.title}}v-list-tile-title>
v-list-tile-content>
v-list-tile>
<v-list-tile>
<v-list-tile-content v-for="z in x.children">
<router-link :to="{ path: x.title}">
<v-list-tile-title>{{ z.text }}v-list-tile-title>
router-link>
v-list-tile-content>
v-list-tile>
v-list-gruop>
<v-divider>v-divider>
div>
template>
v-list>
v-navigation-drawer>
export default {
data:() => ({
drawer: null,
item: [
{title: 'HOME'},
{title: 'Campaign',
children: [
{text: 'Start'},
{text: 'Campaigns'},
{text: 'Previous'}
]
},
{title: 'Payment',
children: [
{text: 'Pending'},
{text: 'Completed'}
]
},
{title: 'Profile'},
{title: 'Logout'}
]
})}
上述结果是:
这家伙很懒,还没有设置简介