我有一个问题,这个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>
1条答案
按热度按时间2vuwiymt1#
因为您正在使用lazy删除它。https://bootstrap-vue.org/docs/components/tabs#lazy-loading-tab-content