Vue引导选项卡-销毁前安装的工作

6pp0gazn  于 2022-12-23  发布在  Vue.js
关注(0)|答案(1)|浏览(114)

我有一个问题,这个Vue引导标签。当我点击标签-2,然后标签-1,第一个安装的'表-1',然后'表-2'销毁。
如果我点击tab-1,然后点击tab-2,所有的东西都会正常工作,“table-1”组件会被销毁,然后“table-2”会被挂载。
有人知道为什么它会这样工作以及如何修复它吗?

tabs: [
  {key: 'tab-1', name: 'Tab 1', icon: 'fas fa-cogs', uniqueKey: this.$uuid.v4(), component: 'tabl-1'},
  {key: 'tab-2', name: 'Tab 2', icon: 'fas fa-cogs', uniqueKey: this.$uuid.v4(), component: 'tabl-2'}
]

<b-tabs v-model="tabIndex">
  <b-tab v-for="tab in tabs" :key="tab.key" lazy>
    <template v-slot:title> <i class="mr-1" :class="tab.icon"></i> {{ tab.name }} </template>
    <p class="mb-0">
      <component :is="tab.component" :key="tab.uniqueKey" />
    </p>
  </b-tab>
</b-tabs>
2vuwiymt

2vuwiymt1#

因为您正在使用lazy删除它。https://bootstrap-vue.org/docs/components/tabs#lazy-loading-tab-content

相关问题