Vue Bootstrap - lazy content load on Collapse

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>

Hiws · Accepted Answer · 2021-02-17 10:14:13Z

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/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Collectives™ on Stack Overflow

Vue Bootstrap - lazy content load on Collapse

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related