javascript - 手风琴加号和减号图标不变

Question

我有这个手风琴和一个折叠（作为一个组件，因为我需要循环它）。这是代码：

手风琴.vue

<div class="accordion col-lg-8 mx-auto" role="tablist">
    <b-card no-body class="mb-1 py-2" v-for="each in questions" :key="each.id">
        <Collapses v-bind:each="each"/>
    </b-card>
</div>

折叠.vue

<div>
    <b-button @click="isActive = !isActive" role="tab" block v-b-toggle="'accordion-'+each.id">{{ each.question }}
     <i class="float-right fa" :class="{ 'fa-plus': !isActive, 'fa-minus': isActive }"></i>
     </b-button>

     <b-collapse v-bind:id="'accordion-'+each.id" visible accordion="my-accordion" role="tabpanel">
         <b-card-body>
              <b-card-text>{{ each.answer }}</b-card-text>
         </b-card-body>
      </b-collapse>
</div>

<script>

export default {
    props: ["each"],
    data() {
        return {
            isActive: false
        }
    }
}
</script>

手风琴工作正常，除了图标。手风琴一次只显示一个（扩展的）折叠。每当我单击另一个折叠时，前一个折叠就会关闭，但图标不会改变（因为我没有单击它）。折叠关闭时如何自动更改图标？

标签： javascriptvue.jsbootstrap-4

Answer 1

事件b-collapse包括show和hide，当组件状态改变时发出。因此，您可以使用v-on指令（或@shortand）在模板中绑定事件侦听器，从而isActive相应地设置标志：

<b-collapse @hide="isActive = false" @show="isActive = true">

然后您可以删除按钮单击处理程序，因为上面的事件绑定已经处理了它。

演示