VueJs Ленивая инициализация компонента вкладки только один раз - PullRequest
Новая
       28

VueJs Ленивая инициализация компонента вкладки только один раз

1 голос
/ 01 ноября 2019

Я пытаюсь сделать инициализацию вкладок bootstrap-vue ленивой, и хотя он работает, если я устанавливаю атрибут lazy на 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>

Мне нужно больше ленивой инициализации каждой вкладки (только один раз), а не перерисовывать компонент вкладки каждый раз, когда пользователь посещает ее. Есть идеи?

1 Ответ

1 голос
/ 01 ноября 2019

Если вы поместите содержимое каждой вкладки в 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>
...