Get Checkbox index in a ListView in nativescript-vue

[geosem42]

Hello,

I have a checkbox inside a ListView component that has a for loop

I need to get the index number of the checked item so I can remove/modify it in the array but I'm unable to do that as there's no :key prop like in Vue.

This is how I'm rendering the list. I'm still new to mobile apps development so I'm not sure whether to use a Label with the checkboxes or just use the text attribute to add the text. WHat is the normal convention here?

I can get the index number of the item with @itemTap on ListView . However, it stops working when I add @checkedChange to the CheckBox tag.

Also something minor I found, I am unable to tap the checkbox to change its state (click in my case since im using an emulator). I have to tap on the text associated with it :text="task.title" and if I remove the text, I have no way to toggle its state.

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

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

[geosem42]

I had to pass the arguments to the function on the @checkedChange event, like so

@checkedChange="onCheckChange(task, index, $event)"

[jcgava]

@geosemaan Hello, I had a problem similar to yours, and looking at your code I had an idea, I tested your code but when selecting a radio it did not deselect the other. Here is an example code:

<StackLayout class="nt-input">
    <ListView
        ref="lista"
        height="150"
        for="(answer, index) in answers"
    >
        <v-template>
            <GridLayout columns="*" rows="*">
                <CheckBox
                    :text="answer.option"
                    :checked="answer.checked"
                    @tap="handleCheckChange(index)"
                    col="0"
                    boxType="circle"
                />
            </GridLayout>
        </v-template>
    </ListView>
</StackLayout>

Script

data() {
    return {
        answers: [
            { id: 0, option: "One", checked: false },
            { id: 1, option: "Two", checked: false },
            { id: 2, option: "Three", checked: false },
        ],
    };
},
methods: {
    handleCheckChange(index) {
        for (let a of this.answers) {
            a.checked = false;
        }
        this.answers[index].checked = true;
        this.$refs.lista.nativeView.refresh();
    },
}