在nativescript-vue的ListView中获取复选框索引答案

【问题标题】：Get Checkbox index in a ListView in nativescript-vue在nativescript-vue的ListView中获取复选框索引
【发布时间】：2019-07-05 21:57:23
【问题描述】：

我在 ListView 组件中有一个复选框，其中包含 for loop

我需要获取选中项的索引号，以便可以在数组中删除/修改它，但我无法这样做，因为没有像 Vue 中那样的 :key 属性。

这就是我呈现列表的方式。我还是移动应用程序开发的新手，所以我不确定是使用带有复选框的Label 还是只使用text 属性来添加文本。这里的正常约定是什么？

我可以在 ListView 上使用 @itemTap 获取项目的索引号。但是，当我将 @checkedChange 添加到 CheckBox 标记时，它停止工作。

我还发现了一些小问题，我无法点击复选框来更改其状态（在我的情况下单击，因为我使用的是模拟器）。我必须点击与之关联的文本:text="task.title"，如果我删除文本，我将无法切换其状态。

<ListView for="(task, index) in tasks" @itemTap="onLabelTap">
    <v-template>
        <GridLayout columns="auto,*">
            <!-- Shows the list item label in the default color and style. -->
            <CheckBox :text="task.title" :checked="task.isChecked" @checkedChange="onCheckChange" col="0" />
            <!--<Label :text="task.text" class="item" col="1" />-->
        </GridLayout>
    </v-template>
</ListView>

JavaScript

data() {
    return {
        tasks: [
            {'id': 0, 'title': 'One', isChecked: false},
            {'id': 1, 'title': 'Two', isChecked: true},
            {'id': 2, 'title': 'Three', isChecked: false}
        ],
    }
},
computed: {
    message() {
        return "<!-- Tasks Page -->";
    }
},
methods: {
    onDrawerButtonTap() {
        utils.showDrawer();
    },
    onLabelTap(event) {
        alert('You clicked on ' + event.index) // I can access `event.index` here
            .then(() => {
                console.log("Alert dialog closed.");
            });
    },
    onCheckChange(event) {
        this.isChecked = event.value;
        console.log(this.isChecked);
        console.log(event.index); // but I can't access it here
    }

【问题讨论】：

为什么不简单地将任务项或索引本身传递给事件处理程序，例如@checkedChange="onCheckChange(task, index)"。
@Manoj 没关系，它就像你说的那样工作。我还需要将$event 作为参数传递。

标签： javascript vue.js nativescript nativescript-vue

【解决方案1】：

只有 ListView 上的事件会给你在 event object 上点击的项目的索引。

对于单个 UI 组件上的任何事件，您可以手动传递参数。类似的，

<ListView for="(task, index) in tasks" @itemTap="onLabelTap">
    <v-template>
        <GridLayout columns="auto,*">
            <!-- Shows the list item label in the default color and style. -->
            <CheckBox :text="task.title" :checked="task.isChecked" @checkedChange="onCheckChange(task, index, $event)" col="0" />
            <!--<Label :text="task.text" class="item" col="1" />-->
        </GridLayout>
    </v-template>
</ListView>

【讨论】：