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:
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
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.