Nativescript Vue（移动应用程序） - 如何将模式列表视图中的选定项目数据传递回主应用程序？

Posted 2023-02-22

【中文标题】Nativescript Vue（移动应用程序） - 如何将模式列表视图中的选定项目数据传递回主应用程序？

【英文标题】：Nativescript Vue (mobile app) - How to pass selected item data from listview in modal back to main app?

【发布时间】：2019-06-27 05:34:44

【问题描述】：

再说一次，我还是 Nativescript Vue 的新手。我已经努力通过 $navigateTo 使其工作，但放弃并改用 $showModal ......这就是我坚持的地方。我已经看到很少有 Nativescript Vue 用于移动应用程序的示例，但它仅显示以一种方式将数据传递给模态。

我想要做的是从这里传递选定的项目：

下面的机场列表截图

AirportList modal from Airportlist.vue

并将所选项目放在“机场名称：”下（见下面的截图）

Custom page in 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中的section area

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

我只是坚持这一点，无法弄清楚如何将 args.item.faaID 和 args.item.airportName 传递回该 TextField 区域中的 App.vue...您的输入将不胜感激。

【问题讨论】：

Passing changed props in $navigateBack的可能重复

感谢您指出这一点。我在链接中使用了该示例并最终得到 ReferenceError: source is not defined 我不确定为什么会出现该错误。我浏览了我的代码并将其与此示例进行了比较。

ReferenceError 发生在您使用某些东西而不声明时，所以我很确定这是您的代码而不是方法的问题。如果您为您的问题分享 Playground 示例，我可以看看。

当然。我的项目在 Linux 上的本地笔记本电脑上。如何将其上传到游乐场？搭档？

另外我已经在 github 上...你可以查看它：github.com/stahlie/first-ns-app 请注意这个项目通过 Sqlite 使用 .db 文件

【参考方案1】：

对于父子：您可以在模态函数onAirportNameTap() 中使用this.$emit("event", key: 'value' )，并通过在自定义元素标签上绑定:event="processEvent" 在父节点上监听它。

对于模态：https://nativescript-vue.org/en/docs/routing/manual-routing/#returning-data-from-the-modal（似乎是最好的方式）。

希望对你有帮助。

【讨论】：

是的。谢谢。

@MattStaley 如果您不介意，选择这个作为答案会对我有所帮助！很高兴我能帮上忙。

完成。还有一个问题...如何使用下面的“数据”来更新上面的 .. onCustomItemTap: function(args) const newId = new Date().getTime(); this.$showModal(AirportList, props: id : newId , fullscreen: true ).then(data => console.log(data); 替换 console.log(data) 时一直遇到未定义的错误到 SelectedAirport = 数据；

我会尝试使用异步函数而不是 .then()，它看起来像：onCustomItemTap: async function(args) const newId = new Date().getTime(); const data = await this.$showModal(AirportList, props: id : newId , fullscreen: true ) SelectedAirport = data;