How to get the instance of ion-tabs in vuejs

Ionic Framework
1

Hey guys,
I’ve seen, that the component has some predefined methods, see here. To use them I need to get a instance of the ion-tabs element, somehow.

  • I tried to reference the element with ref="myElement" and then use this as a instance const element = this.$refs.myElement.getSelected();, but I get an error message, which says getSelected() is not a function.
  • I also tried to get the <ion-tabs> with const tabs = document.querySelector('ion-tabs'); but the getSelected() method isn’t present there, too
    here is a bit more of my code:
<ion-tabs
    id="tabs-container"
    @IonTabsWillChange="beforeTabChange"
    @IonTabsDidChange="afterTabChange"
    ref="myElement"
  >
    <ion-tab
      tab="filter"
    >
      <filter-component />
    </ion-tab>
...

I appreciate any kind of help or advise. Kind regards

2

Hi, did you figure this out? I have the same issue and can’t seem to find an answer. Not very hopeful that this question from June 2019 still remains unanswered in 2021…

3

use refs…

<ion-tabs ref="tabRoot"  >

in your code

    const tabRoot = ref<any>(null);

    onMounted(()=>{
      debugger;
          console.log(tabRoot?.value?.$el);
    })
4

It returns the instance of ion-tabs but the method is still undefined.

Uncaught TypeError: tabs?.value?.$el.getSelected is not a function

Did someone understood how to solve it?
It is wasting all my time, incredible!!!

5

Are you using Ionic + Angular?

7

Hello,

This seems to be common thing to do, but for some reason I can’t gain access to the tabs via ref, in a vue.js composition based component.

this.$refs.tabs.$el is populated with what appears to be plain html. It’s not a HTMLElement, its of type Object. Calling getSelected just results in the usual this is not a function error.

Consider the following example:

<template>
  <ion-page id="mobile-dashboard" ref="ionPage">
    <ion-tabs :refreshKey="refreshKeyTabPage" ref="tabs">
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="badge" href="/mobile-app/dashboard/test">
          <ion-icon :icon=caretUpCircleOutline />
          <ion-label>Test</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="channels" href="/mobile-app/dashboard/test2">
          <ion-icon :icon=peopleCircleOutline />
          <ion-label>Test2</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="settings" href="/mobile-app/dashboard/test3">
          <ion-icon :icon=cogOutline />
          <ion-label>Test3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup lang="ts">
  import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
  import { caretUpCircleOutline, peopleCircleOutline, cogOutline } from 'ionicons/icons';
</script>

<script lang="ts">
  import { defineComponent, toRaw } from 'vue'
  import { CapacitorBinder } from '../capacitor'
  import { App } from '@capacitor/app'
  import { isPlatform } from '@ionic/vue'
  import { useBackButton } from '@ionic/vue'
  import router from '@/router';

  const component = defineComponent({
    async ionViewCanLeave() {
      App.exitApp();
      return false;
    },
    

    async mounted() {
      useBackButton(Number.MAX_SAFE_INTEGER, () => {
        console.log('Handler was called!');
        router.back();
      });

      debugger;

      console.log("--> ", (this.$refs.tabs as any).$el.getSelected());

    },

    data() {return {
      refreshKeyTabPage: 0,
    }},
  });

  export default component
</script>