NativeScript Vue ListView onTap 不发送带有事件的项目

Posted 2023-04-14

【中文标题】NativeScript Vue ListView onTap 不发送带有事件的项目

【英文标题】：NativeScript Vue ListView onTap not sending item with event

【发布时间】：2020-03-18 00:41:25

【问题描述】：

所以我有一个 ListView，它通过一个 onTap 事件循环遍历一个数组对象。 onTap 事件触发它应该触发的功能，但是当我尝试控制台记录 event.index 或 event.item 时，如文档中所列，我的应用程序崩溃说：

"JS ERROR TypeError: undefined is not an object (evalating 'event.index')"

这是我关注的文档：https://nativescript-vue.org/en/docs/elements/components/list-view/

这里是相关的标记：

<ListView for="item in feed" @itemTap="onFeedItemTap()" class="background-gray">
  <v-template>
    <StackLayout class="feed-item-panel">
      <StackLayout orientation="horizontal" style="padding: 5">
        <Label class="feed-item" :text="item.Date" row="0" col="0" />
      </StackLayout>
      <StackLayout orientation="horizontal" style="padding: 5">
        <Label class="feed-item bold" :text="'Product: ' + item.Product" fontAttributes="Bold" row="1" col="0" />
      </StackLayout>
      <StackLayout orientation="horizontal" style="padding: 5">                        
        <Label :class="item.mostRecent" :text="item.info" row="2" col="0" textWrap="true" />
      </StackLayout>
    </StackLayout>            
  </v-template>
</ListView>

相关JS函数：

onFeedItemTap(event)                 
  console.log(event.index);  //GIVES ERROR!!              
  this.$showModal(BBCard);

如果我遗漏了什么或者至少指出我正确的方向，请告诉我。但从我所看到的例子来看，这似乎是标准程序。

【参考方案1】：

和N无关，纯粹是Vue。在文档中，它们不使用括号（方法事件处理程序）。默认情况下，您在此处获取事件对象。

<ListView for="item in listOfItems" @itemTap="onItemTap">

如果您使用括号（方法内联处理程序），则必须使用 $event 来授予对事件对象的访问权限

<ListView for="item in listOfItems" @itemTap="onItemTap($event)">

【讨论】：

谢谢！我没有意识到它就像你在事件中传递的 vue；当我传入 $event onItemTap 时，就像文档一样工作。