accordion plus and minus icon not changing

by

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). My question is how to automatically change the icon whenever the collapse closes? Thank you

41 thoughts on “accordion plus and minus icon not changing”

Leave a Comment