Bootstrap Vue动态生成折叠内容如何单独控制对应加减图标交互

问题根源 #

你当前所有折叠项共用了同一个全局isActive变量控制图标状态，所以只要任意一个项触发状态变更，所有项的图标都会同步切换。另外原代码中把b-collapse放在了partNumberGroup.items的循环内，会生成多个ID相同的折叠组件，属于DOM规范不允许的错误写法，也会影响折叠功能稳定性。

可选实现方案 #

方案1：单独维护每个折叠项的状态

针对每个partNumber单独存储展开状态，适合需要在JS里主动控制折叠状态的场景：

1. 新增状态存储变量

data() {
  return {
    // 原有其他数据
    activePartNumbers: {} // 键为partNumber，值为布尔类型的展开状态
  }
}

2. 修改模板代码

<div class="inventory-detail" v-for="(partNumberGroup,index) in inventory" :key="index" >
   <b-button 
     block 
     v-b-toggle="partNumberGroup.partNumber" 
     variant="primary"
     @click="activePartNumbers[partNumberGroup.partNumber] = !activePartNumbers[partNumberGroup.partNumber]"
   >
      <i 
        class="float-right fa" 
        :class="{ 
          'fa-plus': !activePartNumbers[partNumberGroup.partNumber], 
          'fa-minus': activePartNumbers[partNumberGroup.partNumber] 
        }"
      ></i>
      {{ partNumberGroup.partNumber }}
   </b-button>
   <b-collapse 
     v-bind:id="partNumberGroup.partNumber" 
     v-model="activePartNumbers[partNumberGroup.partNumber]"
   >
      <div class="inventory-detail__card" v-for="item in partNumberGroup.items" :key="item.id">
        <b-card>
           <!-- 折叠内容 -->
        </b-card>
      </div>
   </b-collapse>
</div>

方案2：利用原生aria-expanded属性控制（更推荐）

Bootstrap Vue的v-b-toggle会自动给按钮添加aria-expanded属性标识当前折叠状态，无需额外维护JS变量，适合条目多的场景，性能更优：

1. 模板简化写法

<div class="inventory-detail" v-for="(partNumberGroup,index) in inventory" :key="index" >
   <b-button 
     block 
     v-b-toggle="partNumberGroup.partNumber" 
     variant="primary"
   >
      <i class="float-right fa toggle-icon"></i>
      {{ partNumberGroup.partNumber }}
   </b-button>
   <b-collapse v-bind:id="partNumberGroup.partNumber">
      <div class="inventory-detail__card" v-for="item in partNumberGroup.items" :key="item.id">
        <b-card>
           <!-- 折叠内容 -->
        </b-card>
      </div>
   </b-collapse>
</div>

2. 新增CSS控制图标切换

/* 收起状态显示加号 */
.btn[aria-expanded="false"] .toggle-icon::before {
  content: "\f067";
}
/* 展开状态显示减号 */
.btn[aria-expanded="true"] .toggle-icon::before {
  content: "\f068";
}

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