[Vuejs]-Vue with bootstrap-vue : prevent more than one expanded list-element at all times in list (v-for)

by

2👍

✅

b-collapse has a visible property that you can set. So if you declare a variable in your data to keep track of which b-collapse is expanded, you can use that:

<div v-for="(item, key, index) in nluData">
   <div v-for="(item, key, index) in nluData">
       <div class="alert alert-warning">
           <i @click="expanded=key">&nbsp;</i>
       </div>

   <b-collapse :visible="key === expanded">
       <b-card style="background-color:#f0f8ff; margin-right:-30px;">
           ....
       </b-card>
   </b-collapse>
   </div>
</div>
👤sliptype

Leave a comment