如何阻止v-navigation-drawer关闭？Vuetify层级列表展开异常求助

问题描述 #

预期行为 #

• 组件初始渲染时，自动展开对应v-list-item的子组
• 点击相邻子组项时，导航抽屉保持当前点击的子组展开状态

问题 #

执行第二个操作时，整个导航抽屉会关闭，不符合预期。

我仍需保留:value绑定，但我认为问题与点击项时阻止#activator的v-on事件传播有关。

异常现象 #

首次出现问题后，后续点击导航抽屉项均会恢复正常行为。

解决方案 #

核心原因 #

1. 事件冒泡：点击子组的activator时，事件向上冒泡到父级v-list-group，触发父组的展开/折叠逻辑，导致抽屉关闭
2. 单向绑定冲突：使用:value单向绑定初始展开状态，组件内部状态会在首次点击后和绑定值脱节，后续点击恢复正常是因为组件内部状态接管了控制

修改步骤 #

1. 新增状态变量维护展开状态

在组件data中添加用于控制父组和子组展开状态的变量：

data() {
  return {
    // 原items数据保留
    expandedParent: 'orange', // 默认展开orange父组
    expandedChildren: {
      oranges: 'navel' // 默认展开orange下的navel子组
    }
  }
}

2. 替换单向绑定为双向绑定

将原:value替换为v-model，绑定到新增的状态变量：

• 父组：v-model="expandedParent" + :value="fruit"
• 子组：v-model="expandedChildren[fruit]" + :value="object.name"

3. 阻止子组事件冒泡

在子组的#activator模板中添加@click.stop，避免点击子组触发父组折叠：

修改后完整代码 #

<template>
  <div>
    <v-app>
      <v-list>
        <v-list-group
          v-for="(subObjects, fruit) in items"
          :key="fruit"
          v-model="expandedParent"
          :value="fruit"
          no-action
        >
          <template #activator>
            <v-list-item-title>
              {{ fruit }}
            </v-list-item-title>
          </template>
          <template>
            <v-list-group
              v-for="object in subObjects"
              :key="object.name"
              v-model="expandedChildren[fruit]"
              :value="object.name"
              no-action
              sub-group
            >
              <template #activator>
                <v-list-item-content @click.stop>
                  <v-list-item-title>
                    {{ object.name }}
                  </v-list-item-title>
                </v-list-item-content>
              </template>
              <v-list-item
                v-for="year in object.dates"
                :key="year"
              >
                <template #activator="{ on, attrs }">
                  <v-list-item-title v-bind="attrs" v-on="on">
                    {{ year }}
                  </v-list-item-title>
                </template>
              </v-list-item>
            </v-list-group>
          </template>
        </v-list-group>
      </v-list>
    </v-app>
  </div>
</template>

<script> 
export default {
  data() {
    return {
      items: {
        apples: {
          0: {
            color: 'red',
            name: 'fuji',
            dates: ['2016', '2018'],
          },
          1: {
            color: 'green',
            name: 'granny smith',
            dates: ['2020', '2021'],
          }
        },
        oranges: {
          0: {
            color: 'orange',
            name: 'navel',
            dates: ['2022']
          },
          1: {
            color: 'red orange',
            name: 'blood orange',
            dates: ['2015', '2017'],
          }
        },
      },
      expandedParent: 'orange',
      expandedChildren: {
        oranges: 'navel'
      }
    };
  },
};
</script>

效果验证 #

• 初始渲染时，orange父组和navel子组自动展开
• 点击其他子组（如blood orange）时，父组保持展开状态，仅切换子组的展开/折叠
• 点击父组activator时，正常切换父组的展开状态

内容的提问来源于stack exchange，提问作者jonnyg23