accordion plus and minus icon not changing

Question

I have this accordion and a collapse (as a component because I need to loop it). Here's the code:

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

The accordion works fine except the icons. The accordion only shows one (expanded) collapse at a time. Whenever I click another collapse, the previous collapse closes, but the icon doesn't change (because I did not click it). How do I automatically change the icon whenever the collapse closes?

Answer 1

The b-collapse events include show and hide, which is emitted when the component state changes. Thus, you could use a v-on directive (or @ for shortand) to bind an event listener in the template that sets the isActive flag accordingly:

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

Then you could remove the button-click handler as it's already taken care of by the event binding above.

demo

Answer 2

Your data is defined like method, try to do it in more clear way:

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