How to get the instance of ion-tabs in vuejs

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

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…

use refs…

<ion-tabs ref="tabRoot"  >

in your code

    const tabRoot = ref<any>(null);

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

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!!!

Are you using Ionic + Angular?

Hi, This was very helpful. I also applied this on my Blog at Custom bath bomb Boxes.
It help me A lot. Thank you!