手风琴加减号图标不变

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>

Collapses.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>

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

Answer 1

b-collapse 事件包括show and hide，它在组件状态更改时发出。因此，您可以使用v-on directive（或@ for shortand）在模板中绑定一个事件侦听器，相应地设置isActive 标志：

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

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

demo

Answer 2

您的数据定义为方法，尝试以更清晰的方式进行：

{
    data: () => ({
        isActive: false
    })
}