Vue Bootstrap，如何分别与动态生成的折叠内容上的加号/减号图标交互

Posted 2023-02-22

【中文标题】Vue Bootstrap，如何分别与动态生成的折叠内容上的加号/减号图标交互

【英文标题】：Vue Bootstrap, how to interact with plus/minus icon on dynamic generated collapse content separately

【发布时间】：2021-10-21 10:27:00

【问题描述】：

我有一个使用 Bootstrap Vue Collapse Component 创建折叠内容的 VueJS 视图。 数据是动态的，可以包含数百个项目，这就是为什么您在下面的代码中看到它是通过 Vue 中的 v-for 循环创建的。

<div class="inventory-detail" v-for="(partNumberGroup,index) in inventory" :key="index" >
   <b-button block v-b-toggle="partNumberGroup.partNumber" v-bind:id="partNumberGroup.partNumber" variant="primary"
      @click="(evt) =>isActive = !isActive &&  evt.target.id == partNumberGroup.partNumber">
      <i v-bind:id="partNumberGroup.partNumber" class="float-right fa" :class=" 'fa-plus': !isActive, 'fa-minus': isActive "></i>
       partNumberGroup.partNumber 
   </b-button>
   <div class="inventory-detail__card" v-for="item in partNumberGroup.items">
      <b-collapse v-bind:id="partNumberGroup.partNumber"  >
         <b-card>
            <!--Accordion/Collapse content -->
         </b-card>
      </b-collapse>
   </div>
</div>

这很有效，因为我可以单独展开和折叠每个内容。但是，我面临的一个问题是每次单击图标 fa-minus (-) 或fa-plus (+) 时，它们都会按照下图进行更改。

关于我应该如何实现这一点的任何提示？在我的代码中，我尝试了动态 CSS 类切换，但我仍然缺乏打开特定元素的能力。

我觉得解决这个问题的方法是有条件地应用动态 CSS 类或以某种方式能够使用属性“aria-expanded”。

【问题讨论】：

你能把isActive方法的内容贴出来吗，这可能是问题所在。

my isActive 只是一个设置为 false 的变量。唯一的另一个地方是代码中，每次单击按钮时，它都会将 isActive 更改为 !isActive。我同意你的观点，这确实是这个问题的根源，当 isActive 发生变化时，所有元素都将设置......这就是为什么我认为我必须使用唯一标识每个手风琴的东西，而不仅仅是依赖 isActive。

【参考方案1】：

你可以试试这样的。每当有人点击图标时，将其索引设置为activeIndex（使用setActiveIndex 方法）。然后您可以通过将activeIndex 与当前索引进行比较来相应地设置类

<i 
    @click="setActiveIndex(index)" 
    v-bind:id="partNumberGroup.partNumber" 
    class="float-right fa" 
    :class=" 'fa-plus': !isActive(index), 'fa-minus': isActive(index) ">. 
</i>

然后在脚本部分：

...

data() 
    return 
        activeIndex: -1
    
,
methods: 
   /* set active index on click */
   setActiveIndex(index) 
       this.activeIndex = index;
   ,
   /* check if index is active or not */
   isActive(index) 
       return index === this.activeIndex;
   

【讨论】：

谢谢，两次点击同一个项目时仍有一些奇怪的行为，但这无疑给了我继续前进的基础。

很高兴它有帮助。