如何使用splice方法点击复选框切换Vue.js数组元素布尔值

你当前代码的问题出在toggleItem方法里的splice调用参数错误——把数组元素的布尔值当成了索引传入，导致点击时无法正确修改对应位置的元素。

修正后的完整代码 #

<template>
  <div>
    <!-- 优化：添加视觉反馈，用class区分选中状态 -->
    <div
      v-for="(a, i) in arr"
      :key="i"
      :class="['checkbox', { checked: a }]"
      @click="toggleItem(i)"
    >
      {{ a ? '✓' : '○' }}
    </div>
    <div class="out">{{ arr }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [true, false, true, false, true, true, true],
    };
  },
  methods: {
    toggleItem(index) {
      // splice第一个参数是索引，不是元素值！
      this.arr.splice(index, 1, !this.arr[index]);
    },
  };
};
</script>

<style scoped>
.checkbox {
  display: inline-block;
  padding: 8px 12px;
  margin: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.checkbox.checked {
  background-color: #4CAF50;
  color: white;
}
.out {
  margin-top: 16px;
  padding: 8px;
  border: 1px solid #eee;
}
</style>

关键修正点 #

• toggleItem方法中，splice的第一个参数改为index（当前点击项的索引），而非this.arr[index]（元素的布尔值）。因为splice的语法是splice(起始索引, 删除数量, 替换的新元素)，传布尔值会被隐式转为0/1，导致修改错误的数组项。
• 模板中添加了:class绑定和文本符号，让复选框有视觉上的选中/未选中反馈，提升交互体验。

内容的提问来源于stack exchange，提问作者user20984971