How to use tabs getSelected method in ionic 5 vue app

Ionic Framework Ionic Vue
1

Hi There,

I would like to know how to use the getSelected() method in tabs. The docs do mention this method but an example can’t be found.

My code thusfar looks like this:

<template>
  <ion-page>
    <ion-tabs @ionTabsDidChange="testIt()">
      <ion-tab-bar>
        <ion-tab-button tab="ads" href="/suite/ads/categories" selected>
          <ion-icon :icon="tvOutline" />
          <ion-label color="light">1</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="hub" href="/suite/hub">
          <ion-icon :icon="bagHandleOutline" />
          <ion-label color="light">2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="user" href="">
          <ion-icon :icon="personOutline" />
          <ion-label color="light">3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

My JS Looks like this:

export default {
  name: 'suite',
  data() {
    return {
      tvOutline,
      storefrontOutline,
      personOutline,
      bagHandleOutline
    };
  },
  methods: {
    testIt() {
      //how to use getSelected()?
      console.log('test')
    }
  },
  components: {
    IonTabs,
    IonTabBar,
    IonTabButton,
    IonIcon,
    IonPage,
    IonLabel
  },
};

In the testIt() function I would like to know how I can reach the getSelected method.

Any thoughts?

2

BUT you do get passed the name of the tab

3

Thanks.

I solved my issue with the use of useRoute. Added some meta data in my router to determine the active route.