Vuetify列表组问题：点击下拉项时另一下拉自动关闭的解决方法

在使用Vuetify的<v-list>和<v-list-group>时，同时展开多个组后点击任一子列表项会导致其他组自动关闭，核心原因是v-list的v-model:opened同时承担了组展开状态管理和列表项选中状态管理的双重角色：当点击带有:value的子列表项时，Vuetify会将子项的value写入opened数组，覆盖原本记录组展开状态的值，从而导致其他组被关闭。

以下是两种可行的解决方案：

方案一：移除子列表项的value属性 #

如果子列表项不需要触发选中逻辑，直接去掉:value绑定，点击子项就不会修改opened数组，组的展开状态不受影响。

修改后的完整代码：

<template>
  <v-card class="mx-auto" width="300">
    <v-list v-model:opened="open">
      <v-list-item prepend-icon="mdi-close"></v-list-item>

      <v-list-group value="Admin">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" title="Admin"></v-list-item>
        </template>

        <v-list-item
          v-for="([title], i) in admins"
          :key="i"
          :title="title"
        ></v-list-item>
      </v-list-group>

      <v-list-group value="Actions">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" title="Actions"></v-list-item>
        </template>

        <v-list-item
          v-for="([title], i) in cruds"
          :key="i"
          :title="title"
        ></v-list-item>
      </v-list-group>
    </v-list>
  </v-card>
</template>
<script>
export default {
  data: () => ({
    open: ['Admin'],
    admins: [
      ['Management', 'mdi-account-multiple-outline'],
      ['Settings', 'mdi-cog-outline'],
    ],
    cruds: [
      ['Create', 'mdi-plus-outline'],
      ['Read', 'mdi-file-outline'],
      ['Update', 'mdi-update'],
      ['Delete', 'mdi-delete'],
    ],
  }),
}
</script>

方案二：给每个列表组单独绑定展开状态 #

如果子列表项必须保留value（比如需要处理选中事件），则放弃使用v-list的v-model:opened，改为给每个<v-list-group>单独绑定v-model，实现独立的展开状态控制。

修改后的完整代码：

<template>
  <v-card class="mx-auto" width="300">
    <v-list>
      <v-list-item prepend-icon="mdi-close"></v-list-item>

      <v-list-group v-model="isAdminOpen" value="Admin">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" title="Admin"></v-list-item>
        </template>

        <v-list-item
          v-for="([title], i) in admins"
          :key="i"
          :title="title"
          :value="title"
        ></v-list-item>
      </v-list-group>

      <v-list-group v-model="isActionsOpen" value="Actions">
        <template v-slot:activator="{ props }">
          <v-list-item v-bind="props" title="Actions"></v-list-item>
        </template>

        <v-list-item
          v-for="([title], i) in cruds"
          :key="i"
          :value="title"
          :title="title"
        ></v-list-item>
      </v-list-group>
    </v-list>
  </v-card>
</template>
<script>
export default {
  data: () => ({
    isAdminOpen: true,
    isActionsOpen: false,
    admins: [
      ['Management', 'mdi-account-multiple-outline'],
      ['Settings', 'mdi-cog-outline'],
    ],
    cruds: [
      ['Create', 'mdi-plus-outline'],
      ['Read', 'mdi-file-outline'],
      ['Update', 'mdi-update'],
      ['Delete', 'mdi-delete'],
    ],
  }),
}
</script>

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