将 Vue.js 数组的元素拼接成相反的

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>

如何通过使用 splice 方法单击复选框按钮，将数组 arr 中的每个元素从 true 更改为 false，从 false 更改为 true？

Answer 1

您可以使用 splice() 方法通过单击复选框按钮将数组 arr 中的每个元素从 true 更改为 false，反之亦然。 以下是如何执行此操作的示例：

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