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

Question

Опять же, я все еще новичок в 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);
},

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

Answer 1

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

Для модальных: https://nativescript-vue.org/en/docs/routing/manual-routing/ (кажется, лучший способ).

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