Nativescript-vue RadListView获取项目点击的项目

时间:2019-12-01 16:17:05

标签: javascript android ios vue.js nativescript

在mt nativescript-vue应用程序中,我正在请求RadListView显示启用了loadOnDemand的审阅列表,除了点击项目时一切正常,当我点击项目时,我想获取被点击项目的'title'属性,但是我在控制台中未定义。

这是我的代码:

<template>
<RadListView ref="listView" for="review in reviews" @itemTap="onItemTap(item)" loadOnDemandMode="Auto" @loadMoreDataRequested="onLoadMoreDataRequested" loadOnDemandBufferSize="2">
    <v-template>
      <GridLayout columns="auto,*" rows="auto,auto,auto" style="width:100%; height:auto; margin:0px 0px 10px 0px; padding:20px; background-color:white;" >
            <Image row="0" col="0" :src="review.image" loadMode="async" stretch="fill" style="width:55px; height:55px;  border-radius:50%; margin:0px 20px 0px 0px;"></Image>
            <StackLayout row="0" col="1" orientation="horizontal" style="width:100%; height:20px; ">
                <Label :text="'fa-star' | fonticon" class="fa" v-for="star in review.rating" fontSize="12" :key="star" style="color:rgb(244,227,73); margin:0px 1px 0px 0px; vertical-align:center;"></Label>
                <Label text="hace 3 horas" class="fa c_grey" style="margin:0px 0px 0px 10px; vertcal-align:center;"></Label>
            </StackLayout>
            <Label row="1" col="1" class="c_normal fs_smaller" textWrap="true" style="margin:0;" lineHeight="0" :text="review.body"></Label>
        </GridLayout>
    </v-template>
</RadListView>
</template>
<script >
import { ObservableArray } from 'tns-core-modules/data/observable-array';
export default {


name:'ReviewCardCard',


data(){
    return{
        reviews: new ObservableArray
        ([
            { title:'Titulo 1', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 2', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
            { title:'Titulo 3', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:3 },
            { title:'Titulo 4', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 5', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
        ])
    }
},


methods:
{
onItemTap(item)
    {
      console.log(item);
    },

onLoadMoreDataRequested()
    {
        console.log('load more');

}


}
</script>
<style scoped>
</style>

1 个答案:

答案 0 :(得分:0)

item是一个对象,因此您声明为onItemTap({ item })并表示console.log("Tapped on ${item.title}")