I am creating a Vue page with Buefy b-tab element. My requirement is very simple as the following:
The page has a Buefy Tab element and a button.
When the user click the tick button, it should display Tab 1 and Tab 3
Please check my code in the following CodePen link:
https://codepen.io/aedyucheng/pen/GRaWKoY?editors=1010
In my CodePen example, there is a very weird thing -
If the label of Tab 2 is label="Tab 2"
, then Tab 1's label does not show...
<b-tab-item label="Tab 2">
<div>Tab 2 Content</div>
</b-tab-item>
However, If I change the label of Tab 2 to be <template #header>
tag, then the Tab 1 can display correctly. Why...?
<b-tab-item>
<template #header>
<span>Tab 2</span>
</template>
<div>Tab 2 Content</div>
</b-tab-item>
I cannot figure out why, even I ask ChatGPT, it still give me many nonsense response and doesn't answer why. Does anybody know why in my code, it only works with <template #header>
When using v-if to toggle tab components, you need to add a key
with a unique value on the b-tab-item
, so that the vue will know when diffing the new list of nodes against the old list and correctly render the components.
<b-tab-item key="1" v-if="showAllTabs">
<template #header>
<span>Tab 1</span>
</template>
<div> Tab 1 content</div>
</b-tab-item>