VueJs 延迟初始化选项卡的组件一次

Question

我正在尝试使 bootstrap-vue 选项卡初始化惰性，虽然如果我将惰性属性设置为 true 它会起作用，但它会在我每次访问特定选项卡时呈现组件：

BtabsWrapper.vue:

<b-tabs
    :lazy="true"
  >
    <b-tab
      v-for="(tab, index) in tabs"
      :key="'li-tab-' + index"
      :title="tab.title"
      :href="'#' + tab.id"
    >
      <slot
        :name="tab.id"
      />
    </b-tab>
  </b-tabs>

我需要对每个选项卡进行更多的惰性初始化（仅一次），而不是每次用户访问时都重新呈现选项卡的组件。有什么想法吗？

Answer 1

如果您将每个选项卡的内容包装在 v-if 中，并在加载它们时更改一次该条件，您应该会得到您想要的结果。

在您的情况下，如果您使用的是 v-for，则可以在包含部分中将 v-for 中的索引用作 visitedTabs.includes(index)

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        visitedTabs: []
      }
    },
    methods: {
      onInput(value) {
        if(!this.visitedTabs.includes(value)){
          this.visitedTabs.push(value)
        }
      }
    }
  })
}

body {
  padding: 1em;
}

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-card clas no-body>
    <b-tabs card @input="onInput">
      <b-tab title="First tab">
        <div v-if="visitedTabs.includes(0)">
          Hello World
        </div>
      </b-tab>
      <b-tab title="Second tab">
        <div v-if="visitedTabs.includes(1)">
          <b-input />
        </div>
      </b-tab>
      <b-tab title="Third tab">
        <div v-if="visitedTabs.includes(2)">
          <b-checkbox />
        </div>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

VueJs 延迟初始化选项卡的组件一次

VueJs Lazy initialization of tab's component just once

tabs

lazy-initialization

vue.js

bootstrap-vue