Javascript 强制折叠Vuetify v-list-group中的所有活动项

我正在使用

v-list

在一个永久抽屉中构建导航，我按照指南完成了导航

折叠抽屉时，它只显示图标，悬停时展开，同时显示导航项的名称

一些项目是组，如果我点击它们，我可以看到子项目

当我希望在抽屉折叠时强制折叠活动子项时，就会出现问题

代码如下：

<v-navigation-drawer
  v-model="mainSidebarDrawer"
  :mini-variant.sync="mini"
  fixed
  expand-on-hover
  permanent
>
  <v-list>
    <template v-for="(n, i) in nav">
      <v-list-item v-if="n.to" :key="`${i}-a`" :to="n.to" link>
        <v-list-item-icon>
          <v-icon small>{{ n.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ n.label }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-group
        v-if="n.subItems"
        :key="`${i}-b`"
        :prepend-icon="`${n.icon} fa-em`"
        :value="subItemsValue" // this looks always false
        append-icon="fas fa-chevron-down fa-sm"
      >
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>{{ n.label }}</v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item
          v-for="(s, y) in n.subItems"
          :key="y"
          :to="s.to"
          link
          class="pl-8"
        >
          <v-list-item-icon>
            <v-icon small>{{ s.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ s.label }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
    </template>
  </v-list>
</v-navigation-drawer>

所以，简单回顾一下：

抽屉已折叠，仅显示“我的导航列表”的图标

当鼠标悬停展开时，图标和文本可见

单击列表组可展开子项

将鼠标移离抽屉会导致其像点1一样塌陷

列表组保持展开状态。我想把它折回去

到目前为止，我尝试的是在

mini

属性中进行监听并执行以下操作：

<v-navigation-drawer
  ...
  @update:mini-variant="collapseSubItems"
</v-navigation-drawer>

methods: {
  collapseSubItems() {
    if (this.mini) {
      this.subItemsValue = false
    }
  }
}

---

我认为，不要使用像
子项值那样的单个变量，而是在每个
导航
项上使用“活动”状态变量。然后使用
transitionend
事件将打开的导航项目设置回
active:false

<v-navigation-drawer
      v-model="mainSidebarDrawer"
      permanent
      expand-on-hover
      @transitionend="collapseSubItems"
    >
    <v-list>
        <template v-for="(n, i) in nav">
          <v-list-item v-if="n.to" :key="`${i}-a`" :to="n.to" link>
            <v-list-item-icon>
              <v-icon small>{{ n.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ n.label }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-group
            v-if="n.subItems"
            :key="`${i}-b`"
            :prepend-icon="`${n.icon} fa-em`"
            v-model="n.active"
            append-icon="fas fa-chevron-down fa-sm"
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>{{ n.label }}</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-for="(s, y) in n.subItems"
              :key="y"
              :to="s.to"
              link
              class="pl-8"
            >
              <v-list-item-icon>
                <v-icon small>{{ s.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ s.label }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </template>
     </v-list>
 </v-navigation-drawer>

 collapseSubItems() {
      this.nav.map((item)=>item.active=false)
 },


{{n.icon}
{{n.label}}
{{n.label}}
{{s.icon}}
{{s.label}}
collapseSubItems（）{
this.nav.map（（项）=>item.active=false）
},

演示：

<v-navigation-drawer
      v-model="mainSidebarDrawer"
      permanent
      expand-on-hover
      @transitionend="collapseSubItems"
    >
    <v-list>
        <template v-for="(n, i) in nav">
          <v-list-item v-if="n.to" :key="`${i}-a`" :to="n.to" link>
            <v-list-item-icon>
              <v-icon small>{{ n.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ n.label }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-group
            v-if="n.subItems"
            :key="`${i}-b`"
            :prepend-icon="`${n.icon} fa-em`"
            v-model="n.active"
            append-icon="fas fa-chevron-down fa-sm"
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>{{ n.label }}</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-for="(s, y) in n.subItems"
              :key="y"
              :to="s.to"
              link
              class="pl-8"
            >
              <v-list-item-icon>
                <v-icon small>{{ s.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ s.label }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
        </template>
     </v-list>
 </v-navigation-drawer>

 collapseSubItems() {
      this.nav.map((item)=>item.active=false)
 },