Vue嵌套v-for下v-expansion-panels联动异常问题求助

核心问题 #

所有分组的折叠面板共用了同一个状态变量，且面板的key使用了分组内的循环索引，导致同索引的面板会同步展开/收起。

具体原因 #

• 所有<v-expansion-panels>都绑定了同一个v-model="activesPanels"，这个变量记录的激活面板索引会被所有分组共享，只要某个分组的面板状态变化，所有绑定该变量的面板组都会同步响应。
• <v-expansion-panel>的:key="v"使用了分组内的循环索引，不同分组里的面板可能出现相同的索引值，Vue的diff算法会将这些同索引面板判定为同一组件实例，进一步放大了状态同步的问题。

解决方案 #

1. 给每个分组分配独立的状态变量

将activesPanels改为数组，每个元素对应一个分组的激活面板状态：

// 组件data中初始化
data() {
  return {
    groups: [...],
    // 每个分组对应一个空数组，适配multiple模式
    activesPanels: Array(this.groups.length).fill([])
  }
}

模板中绑定对应分组的状态：

<v-expansion-panels v-model="activesPanels[i]" multiple accordion dense flat>

2. 设置全局唯一的面板key

不要用分组内的循环索引作为key，改用面板数据的唯一标识（如item.id），或拼接分组索引与面板索引生成唯一key：

<!-- 方式1：使用item的唯一ID -->
<v-expansion-panel v-for="(item, v) in group.fact" v-show="shouldRender(v)" :key="item.id">

<!-- 方式2：拼接分组索引与面板索引 -->
<v-expansion-panel v-for="(item, v) in group.fact" v-show="shouldRender(v)" :key="`${i}-${v}`">

修改后，每个分组的折叠面板状态独立，且面板key全局唯一，就能解决点击单个面板导致同索引面板联动的问题。

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