我正在开发 Vue.js 模板,我需要创建一个直至第三层的菜单。如果我使用 v-model 执行主动停用功能,那么效果很好,但在第一级,而不是第二级。
多姆:
<template v-for="item of category">
<template v-if="item.items!= null">
<v-list-group :key="item.title" no-action v-model="item.active">
<template v-slot:activator>
<i class="mr-2" :class="item.action"></i>
<span>{{ item.title }}</span>
</template>
<div>
<template v-for="child in item.items">
<template v-if="child.subitems !== null">
<v-list-group sub-group no-action :key="child.id" prepend-icon="m"
v-model="child.subactive">
<template v-slot:activator>
<v-list-item-title v-text="child.title">
<i class="mr-2" :class="child.action"></i>
</v-list-item-title>
</template>
<template v-for="(subchild) in child.subitems">
<v-list-item :key="subchild.id"
:to="subchild.path">
<v-list-item-title v-text="subchild.title"></v-list-item-title>
</v-list-item>
</template>
</v-list-group>
</template>
</tempalte>
</div>
</v-list-group>
</template>
</template>
数据:
export const category = [
{
action: 'icon-name',
title: 'Level 1',
active: false,
items: [
{
title: 'Level 2',
subactive: true,
path:null,
subitems:[
{ title: 'Level 3', path: '/default/level3'},
{ title: 'Level 3.1', path: '/dashboard/level3.1'}
]
},
{
title: 'Level 2.1',
subactive: false,
path:null,
subitems:[
{ title: 'Level 3', path: '/dashboard/level3'},
{ title: 'Level 3.1', path: '/dashboard/level3.1'},
]
},
]
}
]
}
根据第一级的 vuetify 文档,我使用 v-model="item.active"
并且我在第二级尝试了同样的操作 v-model="child.subactive “
但它不适用于第二级,我该怎么做?
最佳答案
此问题是由于嵌套级别中的 v-slot:activator 造成的,很少有组件(如工具提示、对话框)支持预定义对象传递给激活器并绑定(bind)到事件
尝试了相同的方法来利用 vuetify 行为,但没有达到预期效果
最终添加了一些手动代码并控制列表组的事件和非事件
Here is the working codepen: https://codepen.io/chansv/pen/OJJbNjm?editors=1010
完整代码:
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="500">
<template v-for="item of category">
<template v-if="item.items!= null">
<v-list-group :key="item.title" no-action v-model="item.active">
<template v-slot:activator>
<i class="mr-2" :class="item.action"></i>
<span>{{ item.title }}</span>
</template>
<template v-for="(child, index) in item.items">
<template v-if="child.subitems !== null">
<v-list-group sub-group no-action :key="child.id" v-model="child.subactive" @click="closeOther(index, item.items)">
<template v-slot:activator>
<v-list-item>
<v-list-item-content>
<v-list-item-title>
{{ child.title }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
<v-list-item v-for="(subchild) in child.subitems" :key="subchild.id" @click="navigateTo(subchild.path)">
<v-list-item-action v-if="subchild.icon">
<v-icon>{{ subchild.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ subchild.title }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
</template>
</v-list-group>
</template>
</template>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
category: [
{
action: 'icon-name',
title: 'Level 1',
active: false,
items: [
{
title: 'Level 2',
subactive: true,
path:null,
subitems:[
{ title: 'Level 3', path: '/default/level3', icon: 'call_made'},
{ title: 'Level 3.1', path: '/dashboard/level3.1', icon: 'call_made'}
]
},
{
title: 'Level 2.1',
subactive: false,
path:null,
subitems:[
{ title: 'Level 3', path: '/dashboard/level3', icon: 'call_made'},
{ title: 'Level 3.1', path: '/dashboard/level3.1', icon: 'call_made'},
]
},
]
},
],
model: 1,
}),
methods: {
navigateTo(path) {
console.log(path);
// this.$router.push({path: path});
},
closeOther(val, items) {
items.forEach((x, i) => {
if(val != i) x.subactive = false
})
},
}
})
关于javascript - 如果第二级菜单列表中某个组列表同时处于事件状态,如何将其他组列表设置为非事件状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58161952/