How to use "tab:mounted" event on Vue f7-tab component

Questions
1

Hi,

I can’t figure out how to use the “tab:mounted” event listed in the documentation (https://framework7.io/docs/tabs.html#routable-tabs-events) on a Vue f7-tab component.

In this example :

<f7-tab @tab:show="onTabShow" @tab:hide="onTabHide" @tab:mounted="onTabMounted"/>

“tab:show” and “tab:hide” events will perfectly be triggered but I can’t make “tab:mounted” working the same way.

I’m using latest version of Framework7 (v4.4.6)

Thanks in advance.

2

Does anyone have an idea about the “tab:mounted” event with Vue ?

3

Try this instead @tab:mounted.native="onTabMounted"

4

Thanks @nolimts4web for the answer :+1:

.native modifier won’t fix the problem :grimacing:

Any other idea ?

5

Could routable tab be the cause of this problem ?

I need to navigate through my pages but it will fail if my tab is not correctly mounted. That’s why I’d like to wait for the “mounted” event to continue my navigation.

6

No, as tab:mounted is only routable tab event.

This sounds like some wrong design, what to load something just to keep loading something else?

In Vue.js you can always just use mounter hook in component that is loading inside of routable tab