Search code examples
javascriptcssvue.jsbuefy

How to use Vue and Buefy Tab correctly?

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.

enter image description here

When the user click the tick button, it should display Tab 1 and Tab 3

enter image description here

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>

Solution

  • 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>