时间戳

首页 > 解决方案 > NativeScript Vue ListView onTap 不发送带有事件的项目

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

问题描述

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

“JS ERROR TypeError：未定义不是对象（评估'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);
}

请让我知道我是否缺少某些东西，或者至少指出我正确的方向。但从我所看到的例子来看，这似乎是标准程序。

标签： javascriptioslistviewnativescriptnativescript-vue

解决方案

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

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

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

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

推荐阅读