In my Vue project with bootstrap-vue, I am utilizing the b-collapse feature within a v-for loop for lists. While it is functioning correctly, I am struggling to automatically close expanded list elements when a new one is clicked.
Here is my question:
How can I automatically close previously expanded list elements when clicking on a new list element to expand?
Note: Each v-b-toggle="" is generated with unique values as shown below:
<i v-b-toggle="'collapse' + key + index"
Here is a snippet of my code:
<div v-for="(item, key, index) in nluData">
<div v-for="(item, key, index) in nluData">
<div class="alert alert-warning">
<i v-b-toggle="'collapse' + key + index"> </i>
</div>
<b-collapse :id="'collapse' + key + index">
<b-card style="background-color:#f0f8ff; margin-right:-30px;">
....
</b-card>
</b-collapse>
</div>
UPDATE FOLLOWING @sklingler93's SUGGESTION:
I have made the following changes:
<i @click="expanded=key"> </i>
<b-collapse :id="'collapse' + key + index" visible="key == expanded">
Vue data property:
export default {
data() {
return {
expanded: 0
}
}
I experimented with different data types for expanded (string, boolean, int), but everything ended up expanded and I received the warning:
Invalid prop: type check failed for prop "visible". Expected Boolean, got String.