Nativescript Vue (мобильное приложение) - Как передать данные выбранного элемента из списка в модальном режиме обратно в основное приложение? - PullRequest
Новая
       6

Nativescript Vue (мобильное приложение) - Как передать данные выбранного элемента из списка в модальном режиме обратно в основное приложение?

0 голосов
/ 03 февраля 2019

Опять же, я все еще новичок в Nativescript Vue.Я изо всех сил пытался заставить его работать через $ navigateTo, но сдался и переключился на $ showModal вместо этого ... Вот где я застрял.Я видел НЕСКОЛЬКО примеров с Nativescript Vue для мобильного приложения, но он показывает только передачу данных в модальное состояние одним способом.

Я пытаюсь передать выбранный элемент из этого:

Снимок экрана AirportList ниже

Модал AirportList из Airportlist.vue

и поместите выбранный элемент в поле «Имя аэропорта:» (см. Скриншот ниже)

Пользовательская страница в App.vue

Мой проект можно посмотреть по адресу https://github.com/stahlie/first-ns-app

Вот где я борюсь в коде 

<CardView class="cardStyle" elevation="40" radius="10">
   <StackLayout class="cardContent"  > 
     <Label textWrap="true" text="Airport Name:"/>
     <TextField v-bind:text="SelectedAirportName" hint="Tap to Select" editable="false" @tap="onCustomItemTap"/>
    </StackLayout>
</CardView>

В разделе сценария: 

onCustomItemTap() {
  const newId = new Date().getTime();
  this.$showModal(AirportList, { props: { id : newId }, fullscreen: true });

},

В файле AirportList.vue в области раздела 

onAirportNameTap(args) {
 // const selectedairport
    alert(args.index + " " + args.item.faaID + " " +  args.item.airportName);
},

Я просто застрял в этом и не мог понять, как передавать аргументы.item.faaID и args.item.airportName обратно в App.vue в этой области TextField ... Ваш вклад будет высоко оценен.

1 Ответ

0 голосов
/ 03 февраля 2019

Для parent-child: вы можете this.$emit("event", { key: 'value' }) в вашей модальной функции onAirportNameTap() и прослушать его на родительском элементе, связав :event="processEvent" с тегом пользовательского элемента.

Для модального: https://nativescript -vue.org / ru / docs / routing / manual-routing / # returning-data-the-modeal (кажется, лучший способ).

Надеюсьпомогает.

...