TabView does not support hiding Tabs

[Anubarak]

Could you eventually create support for hiding tabs in the TabView I already searched for similar issues but those are all about dynamic tabs.

https://codesandbox.io/s/bitter-microservice-mk7xl?file=/src/App.vue

<template>
  <button @click="toggleTab">Toggle Tab</button>
  <pre>{{ showTab }}</pre>
  <TabView>
    <TabPanel header="Header I"> Content I </TabPanel>
    <TabPanel header="Header II"> Content II </TabPanel>
    <TabPanel v-if="showTab === true" header="Header III">
      Content III
    </TabPanel>
  </TabView>
</template>
<script>
export default {
  data: () => ({
    showTab: false,
  }),
  methods: {
    toggleTab() {
      this.showTab = !this.showTab;
    },
  },
};
</script>

creates an

TypeError
child.children.forEach is not a function

If you remove the v-if everything works fine.

[voquanghoa]

You can do like this

<template>
  <button @click="toggleTab">Toggle Tab</button>
  <TabView>
    <TabPanel v-for="tab in tabs" :header="tab" :key="tab"> 
      Content {{tab}}
    </TabPanel>
  </TabView>
</template>
<script>
export default {
  data: () => ({
    showTab: false,
    tabs: ["Tab 1", "Tab 2", "Tab 3"]
  }),
  methods: {
    toggleTab() {
      this.tabs = [...this.tabs, "Tab " + (this.tabs.length + 1)];
    },
  },
};
</script>
<style lang="scss">
@import "./App.scss";
</style>

[Anubarak]

But this would require to store the content in a variable somehow.
What would be a clean way to make this work with dynamic content inside the tabs. Or in other words, how would you convert the following? (besides creating a custom component for each tab and load it via component :is)

<TabView>
    <TabPanel header="Header I">
        <div v-for="item in items"> {{ item }} </div>
    </TabPanel>
    <TabPanel header="Header II">
        <InputText />
        <FooBar @click="handleOtherClick">
            <div>Test</div>
        </FooBar>
    </TabPanel>
    <TabPanel v-if="showTab === true" header="Header III">
        <SomeOtherComponent :some-data="items" @click="handleClick" />
    </TabPanel>
</TabView>

[voquanghoa]

Hello,

I think the issue you gave here is a bug in the library, I wish I can help you more on this by fixing it. But I'm just like you, I'm a user of the library. I also reported some other issues like this one #1151 and I hope the team can fix them soon. But the developers are not very active, I think base on the status of the existing issue list.

Something I can suggest you in the meanwhile waiting for the team can fix the issue:

Use an enum to describe the tab content and check them

<TabPanel v-for="tab in tabs" :header="tab.title" :key="tab.key"> 

      <template v-if="tab.type === TabContent.listProduct">
         <ListProductComponet .... />
     </template>

    <template v-if="tab.type === TabContent.listUser">
         <ListUserComponet .... />
     </template>
      
    <template v-if="tab.type === TabContent.configuration">
         <ConfigurationComponet .... />
     </template>
    ......
</TabPanel>

Note that Vue doesn't support switch-case (like Angular ng-switch https://angular.io/api/common/NgSwitch ) but I found this one vuejs/vue#8097 (comment) can be used alternatively

[cagataycivici]

Unable to replicate with the latest PrimeVue 3.4.1. If the issue persists, please try with the latest version available and create a new ticket with our codesandbox template forkso that we can work on it again. Thank you.

[Anubarak]

@cagataycivici I would but there is no release yet.
Why can't we just continue this topic? I'm 99% sure it's not fixed because I still see the very same code in your master branch.

[m-thorsen]

This is still an issue in 3.5.0

To reproduce:

<Accordion>
   <AccordionTab v-if="1 == 2" />
</Accordion>