Issue Changing Dynamic Created Tabs In Ionic + Vue

Ionic Framework Ionic Vue
1

I’m having an issue with Ionic 5 + Vue trying to create dynamic tabs. Hardcoded tabs work fine.

<ion-tabs>
  <ion-tab-bar slot="bottom" class="ion-hide-md-up">
    <ion-tab-button tab="home" href="/home" :selected="currentPath == '/home'">
      <ion-icon :icon="home" />
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="about" href="/about" :selected="currentPath == '/about'">
    <ion-icon :icon="information-outline" />
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

However dynamically creating tabs has an issue when changing the tab.

<ion-tabs>
  <ion-tab-bar slot="bottom" class="ion-hide-md-up">
    <ion-tab-button :tab="tab.key" :href="tab.path" :selected="currentPath == tab.path" :key="tab.key" v-for="tab in tabs">
      <ion-icon :icon="tab.icon"></ion-icon>
      <ion-label>{{tab.label}}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

data() {
  return {
    tabs: [
      { 
        key: "home",
        label: "Home",
        path: "/home",
        icon: home
      },
      { 
        key: "about",
        label: "About",
        path: "/about",
        icon: informationOutline
      }
    ]
  }
}

The error is Cannot read property ‘home’ of undefined at onClick.

Is this an Ionic bug? Or did I do something wrong defining my dynamic tabs?

2

where are the routes? Would be easier to help with a complete sample project as a starting point to review

3

Hi Aaron, here’s a sample of what my routes looks like:

const routes = [
  {
    path: '/',
    component: () => import('@/views/Tabs.vue'),
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      },
      {
        path: 'about',
        component: () => import('@/views/About.vue')
      }
    ]
  }
]
4

This is a known issue: bug: ionic vue, tabs do not detect dynamically generated tabs · Issue #22847 · ionic-team/ionic-framework · GitHub

If you could react to it with a thumbs up reaction that would be helpful for us when trying to prioritize which issues we fix first. Thanks!

1 Like
5

So far what i have understood from the documentation is that tabs and sidemenu both are someway bind’d to the Router [top level navigation] . and when it comes to router the routes are to be predefined, which deify’s the dynamic routing in general [not talking of passing param & query to load a page in certain way] . It would be great to have that functionality in Ionic Vue.