打开/关闭上的手风琴正负图标-Vue2

Question

更改打开/关闭手风琴状态的图标。

模板：

<div v-b-toggle.accordion1 class="accordion-header" @click="isActive = !isActive">
  <h4>Quesstion?</h4>
  <i class="fas" :class="{ 'fa-plus': !isActive, 'fa-minus': isActive }"></i>
</div>

数据：

data () {
 return {
   isActive: false
 }
}

它确实有效，当我单击手风琴标题时，我的图标从加号变为减号，但是如果我有一个以上的问题，则它们都将由加号变为减号，反之亦然，因为它们正在共享相同的数据isActive。如何分隔每个元素，因此只有单击的项目才能更改图标。

Answer 1

要为您的questions创建单独的状态，我只会根据您的问题创建一个组件。这样，每个问题都有自己的状态。

当然会导致每个组件具有相同模板的问题，因此您可以为每个问题设置一个组件插槽以传递唯一的内容。如果数据足够小，可以选择将唯一内容传递到带有道具的question组件中。