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

Question

我在页面中使用多个 Collapse 并希望内容仅在它处于活动状态时显示在选项卡中（延迟加载选项卡内容）。

<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>

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

Vue Bootstrap - lazy content load on Collapse

vue.js

bootstrap-vue