Nativescript Vue: access class functions

Question

I'm currently building an app with Nativescript and Vuejs. I use the Material BottomNavigationBar (https://github.com/Akylas/nativescript-material-components/blob/master/packages/nativescript-material-bottomnavigationbar/README.md).
There are two methods included i need to use:

selectTab(index: number)
showBadge(index: number, value?: number)

Now I need to call these methods and there is the issue. How do I do that?

My code:
main.js

import BottomNavigationBar from 'nativescript-material-bottomnavigationbar/vue';
import BottomNavigationTab from 'nativescript-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);
Vue.use(BottomNavigationTab);

Footer.vue:

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                                     backgroundColor="#f5f5f5" @tabSelected="onBottomNavigationTabSelected" row="1"
                                     class="footer" ref="navBar" :selectedTab="2">
<BottomNavigationTab icon="~/assets/images/logo.png"/>
<BottomNavigationTab icon="~/assets/images/chat.png"/>
<BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>
...
mounted() {
this.$refs.navBar.nativeView.selectTab(2)
}

This is not working and says that nativeView is undefined.

Is there a way to access these class methods?

Regards,
Tobias

Mounted may be too early. Why don't you simply set selectedTabIndex on BottomNavigationBar instead of calling the method upon mounted. — Manoj
– Manoj, Commented Oct 9, 2019 at 21:01

Tobias Schäfer · Accepted Answer · 2019-10-10 10:22:34Z

Found the solution!

It is necessary to wait until the component is loaded.

My way now:

Component:

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                             backgroundColor="#f5f5f5" @tabPressed="pressedNavigation" @tabSelected="pressedNavigation"
                             row="1" class="footer" ref="navBar" @loaded="loaded">
            <BottomNavigationTab icon="~/assets/images/logo.png"/>
            <BottomNavigationTab icon="~/assets/images/chat.png"/>
            <BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>

Method:

 loaded(args) {
     this.loadedNavBar = true;
     this.navBar = args.object
     if (this.selectedTab !== null) this.navBar.selectTab(this.selectedTab)
  },

I select the index and store it in a varaible. When the component is loaded I can adjust the selection.

Mennolp · Accepted Answer · 2019-10-10 08:10:42Z

Your component has yet to load when mounted gets triggered. I'd suggest using a loaded event on your navbar component and then trigger your method.

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                                 backgroundColor="#f5f5f5" @tabSelected="onBottomNavigationTabSelected" row="1" @loaded="onNavbarLoaded"
                                 class="footer" ref="navBar" :selectedTab="2">

    <BottomNavigationTab icon="~/assets/images/logo.png"/>
    <BottomNavigationTab icon="~/assets/images/chat.png"/>
    <BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>

onNavbarLoaded(evt) {
    this.$refs.navBar.nativeView.selectTab(2);
    // I am not sure if you actually have to easy nativeView..
    this.$refs.navBar.selectTab(2);
}

tony19 · Accepted Answer · 2022-07-16 05:46:04Z

0

You can put a ref="mybar" in the tags and then find it under this.$refs.mybar inside your component script.

Just like what was made on this example.

See vue documentation for more details.

edited Jul 16, 2022 at 5:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 9, 2019 at 19:23

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

1 Comment

Tobias Schäfer Over a year ago

Does not work. I added this.$refs.navBar.showBadge(1,50) and the result is: Error in mounted hook: "TypeError: this.$refs.navBar.showBadge is not a function

Collectives™ on Stack Overflow

Nativescript Vue: access class functions

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related