如何让多个v-list-group同时展开（覆盖Vue默认行为）

在Vuetify 2.6版本中，要让多个v-list-group同时展开，需要注意两个核心要点：

• multiple属性是作用在父级<v-list>组件上，而非单个v-list-group
• 每个v-list-group需要绑定独立的响应式变量来控制自身的展开状态

具体实现步骤： #

1. 在Vue组件的data中定义两个独立状态变量，用于控制各组的展开/收起：

data() {
  return {
    isNetworkingOpen: true, // 默认展开Networking分组
    isInterfacesOpen: true, // 默认展开Interfaces分组
    openMenu: '',
    itemsettingsNetworking: [], // 你的业务数据
    itemsettingsInterface: [] // 你的业务数据
  }
}

2. 给包裹v-list-group的父级<v-list>添加multiple属性，取消分组互斥限制：

<v-list multiple>
  <!-- 两个v-list-group组件放在此处 -->
</v-list>

3. 给每个v-list-group绑定对应状态变量，并通过@input事件同步状态变化：

修改后的完整代码：

<v-list multiple>
  <v-list-group :value="isNetworkingOpen" @input="isNetworkingOpen = $event">
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>Networking</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item
      v-for="(setting, i) in itemsettingsNetworking"
      :key="i"
      :class="{'active': openMenu == setting[0]}"
      @click="menu_change(setting[0])"
    >
      <v-list-item-title>{{ setting[0] }}</v-list-item-title>
    </v-list-item>
  </v-list-group>

  <v-list-group :value="isInterfacesOpen" @input="isInterfacesOpen = $event">
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title>Interfaces</v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item
      v-for="(setting, i) in itemsettingsInterface"
      :key="i"
      :class="{'active': openMenu == setting[0]}"
      @click="menu_change(setting[0])"
    >
      <v-list-item-title>{{ setting[0] }}</v-list-item-title>
    </v-list-item>
  </v-list-group>
</v-list>

原理说明： #

• multiple属性告知Vuetify列表组件允许同时激活多个分组，覆盖默认的互斥展开行为
• 每个v-list-group通过独立的响应式变量控制状态，实现分组间的状态隔离
• @input事件用于捕获分组展开/收起的状态变更，同步更新组件内的响应式变量

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