Vue Bootstrap -在折叠时延迟内容加载

Question

我正在使用页面中的多个折叠，并希望内容只出现时，它是活动的，因为它是在标签(懒惰加载标签内容)。

<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

您可以使用@show和@hidden事件来切换布尔属性，然后可以将其绑定到折叠内容上的v-if。

这样，只有当折叠打开时，内容才会在DOM中呈现。

​

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>

​