Vue响应式问题：使用方法修改数组后视图未渲染

你的代码里模板没实时更新，根本不是Vue响应式的锅，是toggleItem方法里的逻辑写错了：你写的!index是对索引数字取反，不是对数组里的元素取反，比如index=0时，!0得到true，index=1时!1得到false，完全不是你想要的“点击元素取反”的效果。

而且虽然splice是Vue能自动检测到的数组变更方法，但你传入的新值不对，自然看不到正确的更新。

修复后的完整代码 #

<template>
  <div>
    <!-- 循环渲染每个checkbox项 -->
    <div
      v-for="(a, i) in arr"
      :key="i"
      :checked="a"
      @click="toggleItem(i)"
      class="checkbox"
    >
      <!-- 显示当前项状态，方便查看点击效果 -->
      状态：{{ 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是Vue可检测的数组更新方法
      this.arr.splice(index, 1, !this.arr[index]);
      // 也可以用Vue.set实现同样效果：Vue.set(this.arr, index, !this.arr[index])
    }
  }
};
</script>

关键修改点 #

• toggleItem方法里把!index改成!this.arr[index]，确保是对数组当前位置的元素取反
• 给循环项加上状态显示，直观反馈点击后的变化
• 用外层div包裹模板元素，避免原结构可能导致的渲染混乱

这样修改后，点击每个checkbox项，对应的数组元素会正确取反，模板也会实时更新显示最新的数组状态。

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