CODEWITHSUNDEEP
javascriptvue.jsnativescriptnativescript-vue
Halnex
Halnex

Reputation: 4536

Get Checkbox index in a ListView in nativescript-vue

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
    }

Upvotes: 0

Views: 1174

Answers (1)

Manoj
Manoj

Reputation: 21908

Only the events on ListView will give you the index of the item tapped on the event object.

For any events on individual UI components, you may pass the parameters manually. Something like,

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

Upvotes: 1

Related Questions