Question

我在具有ListView的{{1}}组件中有一个复选框。

我需要获取选中项的索引号，以便可以在数组中删除/修改它，但由于Vue中没有for loop道具，所以我无法做到这一点。

这就是我呈现列表的方式。我仍然不熟悉移动应用程序开发，因此不确定是否在复选框中使用:key还是仅使用Label属性添加文本。这是正常的惯例吗？

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

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

:text="task.title"

javascript

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

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

1 个答案: