Nativescript Vue: функции доступа к классам - PullRequest
Новая
       24

Nativescript Vue: функции доступа к классам

1 голос
/ 09 октября 2019

В настоящее время я создаю приложение с помощью Nativescript и Vuejs. Я использую Material BottomNavigationBar (https://github.com/Akylas/nativescript-material-components/blob/master/packages/nativescript-material-bottomnavigationbar/README.md).
Есть два метода, которые мне нужно использовать:

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

Теперь мне нужно вызвать эти методы, и возникает проблема. Как это сделать?

Мой код:
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)
}

Это не работает и говорит, что nativeView не определен.

Есть лиспособ получить доступ к этим методам класса?

С уважением,
Тобиас

Ответы [ 3 ]

0 голосов
/ 10 октября 2019

Ваш компонент еще не загружен, когда смонтировано сработало. Я бы предложил использовать загруженное событие в вашем компоненте navbar, а затем вызвать ваш метод. 

<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 голосов
/ 10 октября 2019

Нашли решение!

Необходимо дождаться загрузки компонента.

Мой путь:

Компонент: 

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

Метод: 

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

Я выбираю индекс и сохраняю его в переменной. Когда компонент загружен, я могу отрегулировать выбор.

0 голосов
/ 09 октября 2019

Вы можете поместить ref = "mybar" в теги, а затем найти его под this.$refs.mybar внутри скрипта компонента.

Так же, как это было сделано на thisпример .

Подробнее см. документация .

...