Vuetify v-list-group根据展开状态切换append-icon失效求助

你的问题主要出在共用单个marker变量以及没有利用v-list-group内置的状态管理这两点上，下面一步步帮你修复：

1. 核心问题分析 #

• 你用同一个marker变量控制所有层级的v-list-group，这会导致所有组的图标同时切换，状态完全混乱。
• v-list-group本身自带展开/收起的状态（通过value属性），不需要手动维护额外的marker变量，手动监听@click反而会和组件内置的逻辑冲突，导致状态不同步。

2. 修复方案 #

我们需要给每个组分配独立的状态，用对象来存储每个item的展开状态，同时利用v-list-group的v-model来绑定状态，让组件自动同步展开/收起状态：

步骤1：初始化每个组的独立状态 #

在组件的data中添加一个对象，用来记录每个组的展开状态，键可以用item的唯一id来区分：

data() {
  return {
    test: [...], // 你的原始数据数组
    groupStates: {} // 存储每个组的展开状态，格式如 { "group-1": true, "subgroup-2": false }
  }
}

步骤2：修改Pug模板，绑定独立状态并切换图标 #

针对一级和二级的v-list-group，分别绑定对应的独立状态，同时根据状态切换图标：

v-list(expand, dense, nav)
  //1 list lvl
  template(v-for="item in test" :key="item.id")
    v-list-item( v-if="!item.categories" )
      v-list-item-title {{ item.id }}. {{ item.block }}
    v-list-group( 
      v-else, 
      v-model="groupStates[`group-${item.id}`]", 
      :append-icon="groupStates[`group-${item.id}`] ? 'remove' : 'add'" 
    )
      template(#activator)
        v-list-item-content
          v-list-item-title {{ item.id }}. {{ item.block }}
      //2 list lvl
      template(v-for="subItem in item.categories" :key="subItem.id")
        v-list-item( v-if="!subItem.elements" )
          v-list-item-title {{ subItem.id }}. {{ subItem.name }}
        v-list-group( 
          v-else, 
          v-model="groupStates[`subgroup-${subItem.id}`]", 
          :append-icon="groupStates[`subgroup-${subItem.id}`] ? 'remove' : 'add'" 
        )
          template(#activator)
            v-list-item-content
              v-list-item-title {{ subItem.id }}. {{ subItem.name }}
          //3 list lvl
          ...

3. 为什么这样有效？ #

• v-model="groupStates[group-${item.id}]" 会自动绑定v-list-group的展开状态，组件内置的展开/收起逻辑会同步更新这个值，不需要手动写@click事件。
• 每个组用唯一的键（比如group-1、subgroup-2）来存储状态，不同组之间不会互相干扰。
• :append-icon直接根据当前组的状态值来切换，逻辑清晰且和组件状态完全同步。

额外提示 #

如果你希望默认展开某些组，只需要在data里初始化对应的状态即可：

groupStates: {
  'group-1': true, // 默认展开id为1的一级组
  'subgroup-3': false // 默认收起id为3的二级组
}

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