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

Question

我在 ListView 组件中有一个复选框，该组件具有 for loop

我需要获取选中项目的索引号，以便我可以在数组中 remove/modify 它，但我无法这样做，因为 Vue 中没有 :key prop。

这就是我呈现列表的方式。我还是移动应用程序开发的新手，所以我不确定是使用带有复选框的 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
    }

Answer 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>

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

Get Checkbox index in a ListView in nativescript-vue

javascript

vue.js

nativescript

nativescript-vue