1
votes

Nativescript Vue: accéder aux fonctions de classe

Je construis actuellement une application avec Nativescript et Vuejs. J'utilise le Material BottomNavigationBar ( https://github.com/Akylas/nativescript-material-components/blob/master/packages/nativescript-material-bottomnavigationbar/README.md ).
Il y a deux méthodes que je dois utiliser:

selectTab (index: nombre)
showBadge (index: nombre, valeur?: nombre)

Je dois maintenant appeler ces méthodes et il y a le problème. Comment je fais ça?

Mon code:
main.js

<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)
}

Footer.vue:^

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

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

Cela ne fonctionne pas et indique que nativeView n'est pas définie.

Existe-t-il un moyen d'accéder à ces méthodes de classe?

Cordialement,
Tobias

vuejs2 nativescript nativescript-vue

1 commentaires

Monté peut être trop tôt. Pourquoi ne pas simplement définir selectedTabIndex sur BottomNavigationBar au lieu d'appeler la méthode lors du montage.

3 Réponses :

0
votes

Vous pouvez mettre un ref = "mybar" dans les balises, puis le trouver sous this. $ refs.mybar dans le script de votre composant.

Tout comme ce qui a été fait sur cet exemple .

Consultez la documentation vue pour plus de détails.

1 commentaires

Ne marche pas. J'ai ajouté this. $ Refs.navBar.showBadge (1,50) et le résultat est: Erreur dans le crochet monté: "TypeError: this. $ Refs.navBar.showBadge n'est pas une fonction

0
votes

Votre composant n'a pas encore été chargé lorsqu'il est monté est déclenché. Je suggérerais d'utiliser un événement chargé sur votre composant de barre de navigation, puis de déclencher votre méthode.

<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);
}

0 commentaires

0
votes

J'ai trouvé la solution!

Il faut attendre que le composant soit chargé.

Mon chemin maintenant:

Composant:

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

Méthode:

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

Je sélectionne l'index et le stocke dans une variable. Lorsque le composant est chargé, je peux ajuster la sélection.

0 commentaires