Change Vue.js array's elements to opposite with splice

Question

<template>
        <div>
            <div
                v-for="(a, i) in arr"
                :key="i"
                :checked="a"
                @click="toggleItem(i)"
                class="checkbox"
            >
        </div>
        <div class="out">{{ arr }}</div>
    </template>

    <script>
    export default {
        data() {
            return {
              arr: [true, false, true, false, true, true, true],
            };
        },
        methods: {
            toggleItem(index) {
                this.arr.splice(this.arr[index], 1, !this.arr[index]);
            },
        };
    </script>

How can I change each element in the array arr from true to false and from false to true by clicking the checkbox button using splice method ?

Answer 1

You can use the splice() method to change each element in the array arr from true to false and vice versa by clicking the checkbox button. Here's an example of how you can do it:

methods: {
    toggleItem(index) {
        this.arr.splice(index, 1, !this.arr[index]);
    },
};