如果在第二级菜单列表中同时处于活动状态,如何设置停用其他组列表?

Var*_*hal 5 javascript vue.js vuetify.js

我正在处理 Vue.js 模板,我需要创建一个高达 3 级的菜单。如果我使用 v-model 执行主动停用功能,那么它工作正常,但在第 1 级,而不是在第 2 级。

多姆:

<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>
Run Code Online (Sandbox Code Playgroud)

数据:

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'},
                     ]
                  },
               ]
            }
         ]
      }
Run Code Online (Sandbox Code Playgroud)

根据我使用的第 1 级的 vuetify 文档,v-model="item.active"我尝试了第 2 级的相同操作,v-model="child.subactive"但它不适用于第 2 级,我该怎么做?