Good day,
my objective is as follows:
Whenever a new tab is opened, it should become 'active' and display its content on the browser
- Issue: Currently, when a new tab is opened, the previous tab remains 'active'.
Check out a simple example of this problem.
To replicate this issue, follow these steps:
- Go to the BootstrapVue Playground;
- Scroll down to the 'Dynamic tabs + tabs-end slot' section at the bottom of the page (within the advanced examples);
- Double-click on the code area (to enable editing);
- Paste the code snippet below
<template>
<div>
<b-card no-body>
<b-tabs card>
<!-- Render Tabs, provide 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 content {{ 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>
<!-- Display this if no tabs are open -->
<template v-slot:empty>
<div class="text-center text-muted">
No tabs are currently open<br>
Click the <b>+</b> button above to open a new tab.
</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>
- Click on the '+' button in the rendering area at the beginning of the code to add new tabs.
Any ideas on how to fix this issue?