如何在BootstrapVue中立即显示新打开的选项卡内容

Question

早上好，

我的目标是：

每次打开新选项卡时，它都会变为"活动"，浏览器会显示其内容

• 问题：每次打开新的选项卡时，以前打开的选项卡都保持"活动"状态

看看这个问题的一个微不足道的例子。

为了重现问题：

1. 访问BootstrapVue游乐场
2. 滚动到页面底部，标题为"动态选项卡+选项卡末端插槽"的部分(出现在高级示例部分(
3. 双击代码区域(可以对其进行修改(
4. 粘贴以下代码

<template>
<div>
<b-card no-body>
<b-tabs card>
<!-- Render Tabs, supply a unique `key` to each tab -->
<b-tab v-for="tab in tabs" :key="tab.id" :class="{active:tab.isActive}" :title="'Tab ' + tab.id">
Tab contents {{ tab.id }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(tab.id)">
Close tab
</b-button>
</b-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<template v-slot:tabs-end>
<b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
</template>
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br>
Open a new tab using the <b>+</b> button above.
</div>
</template>
</b-tabs>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [],
tabCounter: 0,
activeTab: {}
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].id === x) {
this.tabs.splice(i, 1)
}
}
},
newTab() {
const newTab = {
id: this.tabCounter,
isActive: true
};
this.tabCounter++;
this.tabs.push(newTab);
this.setActive(newTab);
},
setActive(tab) {
tab.isActive = true;
this.activeTab = tab;
this.tabs.forEach((tab) => {
if (tab.id !== this.activeTab.id) {
tab.isActive = false;
}
})
}
}
}
</script>

5. 尝试通过单击渲染区域中的"+"按钮添加新选项卡，该按钮位于粘贴代码的开头

我做错了什么

Answer 1

使用b-tab

1. 事件：已更改
2. 属性：v-model

<b-tabs v-model="tabActive" @changed="onTabChanged">
data() {
return {
tabActive: 0,
tabs:[],
}
onTabChanged() {
this.tabActive = this.tabs.length - 1;
},

Answer 2

您可以通过将active道具添加到<b-tab>来实现这一点，这将使新创建的选项卡成为活动选项卡。

<b-tab active ...>

示例

new Vue({
el: "#app",
data() {
return {
tabs: [],
tabCounter: 0
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i] === x) {
this.tabs.splice(i, 1)
}
}
},
newTab() {
this.tabs.push(this.tabCounter++)
}
}
});

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-body>
<b-tabs card>
<!-- Render Tabs, supply a unique `key` to each tab -->
<b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i" active>
Tab contents {{ i }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
Close tab
</b-button>
</b-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<template v-slot:tabs-end>
<b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
</template>
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br>
Open a new tab using the <b>+</b> button above.
</div>
</template>
</b-tabs>
</b-card>
</div>

Answer 3

你好，MIchele Rosito，

组件b-tab接受一个值，该值是选定的选项卡索引(通过v-model传递(

下面我有一个工作原型的简化版本，我认为它做什么你做什么。

但有一个问题，当添加一个新的选项卡时，它将由bootstap在(虚拟(DOM上渲染，这将需要一些时间，并且我们不能选择尚未渲染的选项卡。

"；解决方案"；(一种不太好的绷带(是给它几毫秒，然后才改变"；tabIndex"；以便给选项卡一些渲染时间。

这不是生产的最佳解决方案，但我认为它可以为您指明正确的方向。

<template>
<div>
<b-card no-body>
<b-tabs card v-model="tabIndex">
<!-- Render Tabs, supply a unique `key` to each tab -->
<b-tab v-for="tab in tabs" :key="tab.id" :class="{active:tab.isActive}" :title="'Tab ' + tab.id">
Tab contents {{ tab.id }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(tab.id)">
Close tab
</b-button>
</b-tab>
<!-- New Tab Button (Using tabs-end slot) -->
<template v-slot:tabs-end>
<b-nav-item role="presentation" @click.prevent="newTab" href="#"><b>+</b></b-nav-item>
</template>
<!-- Render this if no tabs -->
<template v-slot:empty>
<div class="text-center text-muted">
There are no open tabs<br>
Open a new tab using the <b>+</b> button above.
</div>
</template>
</b-tabs>
</b-card>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [],
tabIndex: 0,
tabCounter: 0,
activeTab: {}
}
},
methods: {
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].id === x) {
this.tabs.splice(i, 1)
}
}
},
newTab() {
const newTab = {
id: this.tabCounter,
};
this.tabCounter++;
this.$set(this, tabs, this.tabs.push(newTab));  
setTimeout(() => { this.tabIndex = this.tabs.length;}, 100);      
}
}
}
</script>

这有帮助吗？