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

Question

我的 ListView 组件内有一个复选框，该组件具有 for 循环

我需要获取选中项目的索引号，以便我可以在数组中删除/修改它，但我无法做到这一点，因为没有像 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
    }

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>