[Vuejs]-Close all <b-collapse> when clicking on a button (starting visible)

by

0👍

One way to achieve this is to set a ‘visible’ boolean in the parent, toggled by the button press, and then pass this to the child to use in the button elements. For example:

Parent.vue

<b-button class="col-5" v-b-toggle="'New' + item.id" variant="danger" @click="!buttons_visible">
<Child :idParent="item.id" :buttons_visible="buttons_visible" />

Child.vue

<b-collapse visible :id="'New' + idParent">
  <b-button v-b-toggle="Toggle1"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle1"></b-collapse>

  <b-button v-b-toggle="Toggle2"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle2"></b-collapse>

  <b-button v-b-toggle="Toggle3"></b-button>
  <b-collapse :visible="buttons_visible" id="Toggle3"></b-collapse>
</b-collapse>

Leave a comment