Vue Bootstrap - lazy content load on Collapse - vue.js

Question

I am using multiple Collapse in the page and want the content to appear only when it is active as it is in Tabs (Lazy loading tab content).
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
<b-button v-b-toggle.collapse-2 variant="primary">Toggle Collapse 2</b-button>
<b-collapse id="collapse-2" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>

Answer 1

You can use the #show and #hidden events to toggle a boolean property, which you can then bind to a v-if on your collapse's content.
This way the content will only be rendered in the DOM when the collapse is open.
new Vue({
el: '#app',
data() {
return {
isCollapseOpenOne: false,
isCollapseOpenTwo: false
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-button v-b-toggle.collapse-2 variant="primary">Toggle Collapse 2</b-button>
<b-collapse id="collapse-1" class="mt-2" #show="isCollapseOpenOne = true" #hidden="isCollapseOpenOne = false">
<b-card v-if="isCollapseOpenOne">
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
<b-collapse id="collapse-2" class="mt-2" #show="isCollapseOpenTwo = true" #hidden="isCollapseOpenTwo = false">
<b-card v-if="isCollapseOpenTwo">
<p class="card-text">Collapse contents Here</p>
</b-card>
</b-collapse>
</div>