Get Checkbox index in a ListView in nativescript-vue

Question

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
    }

Why don't you simply pass the task item or index itself to the event handler, something like @checkedChange="onCheckChange(task, index)". — Manoj
– Manoj, Commented Jul 5, 2019 at 22:40
@Manoj nevermind, it worked like you said. I needed to pass $event as an argument as well. — Halnex
– Halnex, Commented Jul 5, 2019 at 23:01

Manoj · Accepted Answer · 2019-07-05 23:12:30Z

1

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>

answered Jul 5, 2019 at 23:12

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get Checkbox index in a ListView in nativescript-vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related