bug: ionic vue, tabs do not detect dynamically generated tabs

[alvarosabu]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

If tabs are created dynamically using a v-for like this:

<ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button
          :tab="tab.slug"
          :href="`/tabs/${tab.slug}`"
          v-for="tab in tabs"
          :key="tab.slug"
        >
          <ion-icon :icon="tab.icon" />
          <ion-label>{{ tab.label }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
 </ion-tabs>

When tapping a tab to navigate:

Uncaught TypeError: Cannot read property 'tab2' of undefined

tabState seems to be empty if ion-tab-button is not set manually in the templates

Expected behavior:

Should be possible to create tabs dynamically.

Steps to reproduce:

1. Clone reproduction link https://github.com/alvarosaburido/ionic-tabs-repro
2. ionic serve
3. Tap Tab 2 Tab

Related code:

// Tabs.vue
<template>
  <ion-page>
    <ion-tabs v-if="tabs.length > 0">
      <ion-tab-bar slot="bottom">
        <ion-tab-button
            v-for="tab in tabs"
          :tab="tab.slug"
          :href="`/tabs/${tab.slug}`"
          
          :key="tab.slug"
        >
          <ion-icon :icon="tab.icon" />
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script lang="ts">
import { Ref, ref } from 'vue';
import { IonTabBar, IonTabButton, IonTabs, IonIcon, IonPage } from '@ionic/vue';
import { homeOutline, pizzaOutline, locationOutline } from 'ionicons/icons';

export interface Tab {
  icon: string;
  slug: string;
}

export default {
  name: 'Tabs',
  components: { IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
  setup() {
    const tabs: Ref<Tab[]> = ref([
      {
        icon: homeOutline,
        slug: 'home',
      },
      {
        icon: pizzaOutline,
        slug: 'products',
      },
      {
        icon: locationOutline,
        slug: 'groceries',
      },
    ]);
    return {
      tabs,
    };
  },
};
</script>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.3 (/Users/alvarosaburido/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run                             : 1.3.0

System:

   NodeJS : v12.16.1 (/Users/alvarosaburido/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.14.11
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. Did you push your changes to the GitHub repo? It looks like there is just a default tabs starter app.

[liamdebeasi]

Never mind, I was able to add in the code snippet in your post to reproduce the issue.

[alvarosabu]

Hi, sorry busy day at the office, yeah for some reason I forgot to push the commit to the repo sorry, It's now there.

Were you able to reproduce it?

[liamdebeasi]

Yeah I can reproduce the issue. Thanks!

[FreaksOnE]

Any updates on how to fix this issue?

[lahdekorpi]

Are there any workarounds for this?

[cwist2]

@lahdekorpi, it will be fix in 5.7.0 as @liamdebeasi added this issue to the 5.7.0 milestone 😉

[lahdekorpi]

@lahdekorpi, it will be fix in 5.7.0 as @liamdebeasi added this issue to the 5.7.0 milestone

Thanks @cwist2
Yeah, I noticed but was wondering if there is a hack for this, like using CSS, while waiting for the fix to come in the future.

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.7.0-dev.202104192129.35fdb0c @ionic/vue-router@5.7.0-dev.202104192129.35fdb0c

Thanks!

[dalezak]

@liamdebeasi dynamic tabs appear to work fine with those dev builds 👍

[margusk]

@liamdebeasi yes working now as should 👍

[liamdebeasi]

Thanks for the issue. This has been resolved via #23212, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.