Javascript 如果第二级菜单列表中的一个组同时处于活动状态，如何设置非活动的其他组列表？

我正在使用Vue.js模板，我需要创建一个3级菜单。如果我使用v-model执行主动停用功能，则该功能工作正常，但在第1级，而不是第2级

Dom:

---

根据vuetify在第一级的文档，我使用了

v-model=“item.active”

，并且我在第二级尝试了相同的方法

v-model=“child.subactive”

，但它在第二级不起作用。我如何做到这一点？？？

这个问题是由于嵌套级中的v-slot:activator造成的，很少有组件（如工具提示、对话框）支持传递给激活器并绑定到事件的预定义对象

这是你的电话号码

找到

尝试了同样的方法来利用vuetify行为，但没有达到预期效果

最后添加了一些手动代码并控制列表组的活动和非活动

这是工作代码笔：

完整代码：

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

{{item.title}
{{child.title}
{{subchild.icon}
{{subchild.title}
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
类别：[
{
操作：“图标名称”，
标题：“一级”，
活动：错误，
项目：[
{ 
标题:"二级",，
亚活动：是的，
路径：null，
分项：[
{title:'Level 3'，path:'/default/level3'，icon:'call_make'}，
{title:'Level 3.1'，路径：'/dashboard/level3.1'，图标：'call_made'}
]
},
{ 
标题：“2.1级”，
亚活动：假，
路径：null，
分项：[
{title:'Level 3'，路径：'/dashboard/level3'，图标：'call_make'}，
{title:'Level 3.1'，路径：'/dashboard/level3.1'，图标：'call_made'}，
]
},
]
},
],
型号：1，
}),
方法：{
导航到（路径）{
console.log（路径）；
//这是.$router.push（{path:path}）；
},
关闭其他（val、项目）{
项目。forEach（（x，i）=>{
如果（val！=i）x.subactive=false
})
},
}
})

你能分享category对象吗？这真的有助于解决这个问题。嘿！！我已经用数据数组更新了这个问题。你有没有试着解决它？我现在就试试，让你知道……好的！我在等你

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'},
                     ]
                  },
               ]
            }
         ]
      }

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