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

【问题标题】：Force collapse of all active items in Vuetify v-list-group强制折叠 Vuetify v-list-group 中的所有活动项
【发布时间】：2020-11-07 07:10:31
【问题描述】：

我正在使用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>

Vue 代码有：

data() {
  return {
    mainSidebarDrawer: true,
    mini: true,
    subItemsValue: false
  }
}

所以，回顾一下：

抽屉已折叠，仅显示我的导航列表图标
悬停时展开，图标和文本可见
单击列表组会展开子项
将鼠标从抽屉移开会导致它像第 1 点一样折叠
列表组保持展开状态。我想把它收起来

到目前为止，我尝试的是在 mini 属性上收听并执行此操作：

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

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

不幸的是，subItemsValue 永远不会改变。我也试着把它移到v-model。

怎样才能达到我的效果？谢谢

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

我认为不要使用像 subItemsValue 这样的单个变量，而是在每个 nav 项目上使用“活动”状态变量。然后使用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)
 },

演示：https://codeply.com/p/qzrKTPSzrB

【讨论】：