javascript - 强制折叠 Vuetify v-list-group 中的所有事件项目

Question

我正在使用 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. 抽屉已折叠，仅显示我的导航列表的图标
2. 悬停时展开，图标和文字可见
3. 点击列表组展开子项
4. 将鼠标从抽屉移开会导致它像第 1 点一样折叠
5. 列表组保持展开状态。我想把它折叠起来

到目前为止，我尝试的是监听 mini 属性并执行此操作:

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

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

不幸的是，subItemsValue 永远不会改变。我还尝试将它移动到 v-model 中。

如何实现我的结果？谢谢

Answer 1

我认为与其使用像 subItemsValue 这样的单个变量，不如在每个 nav 项目上使用“事件”状态变量。然后使用transitionend事件将打开的nav 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)
 },

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