VueJS复选框点击两次才切换类的问题排查求助

嘿，这个问题我之前也碰到过，核心原因就是你同时用了v-model和手动修改状态的逻辑，导致两次反转抵消了！

咱们一步步理清楚点击复选框时发生的事情：

1. 当你点击复选框，v-model会自动把todo.completed的值反转（比如从false变成true），这时候理论上is-complete类应该加上了。
2. 但紧接着change事件触发，调用markComplete方法，又把todo.completed反转了一次（变回false）。

相当于一次点击做了两次相反的操作，结果就是todo.completed又回到了初始状态——所以第一次点击时，你看到复选框勾选了（浏览器原生的视觉反馈），但Vue绑定的类因为数据被改回去了，没加上；第二次点击时，这个反转过程又来一遍，数据才真正变成true，类才生效。

解决起来很简单，二选一就行：

方案一：保留v-model，去掉多余的事件和方法 #

v-model本来就是专门用来做表单元素和数据双向绑定的，完全不需要额外的方法来手动切换状态：

<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
  <p>
    <input type="checkbox" v-model="todo.completed">
    {{todo.title}}
  </p>
</div>

删掉@change="markComplete"和对应的markComplete方法就行，点击复选框时，v-model会自动同步todo.completed的状态，类也会跟着自动切换。

方案二：如果需要额外逻辑，改用手动绑定 #

要是你点击复选框时还要做其他事情（比如给后端发请求），那可以去掉v-model，手动绑定状态和处理事件：

<div class="todo-item" v-bind:class="{'is-complete':todo.completed}">
  <p>
    <input type="checkbox" :checked="todo.completed" @change="markComplete">
    {{todo.title}}
  </p>
</div>

methods: {
  markComplete(event) {
    // 直接用复选框的实际状态更新数据，避免手动反转出错
    this.todo.completed = event.target.checked;
    // 这里可以加你需要的额外逻辑，比如调用API更新后端数据
  }
}

这种方式是把复选框的选中状态和todo.completed单向绑定，然后在change事件里根据真实的DOM状态来更新数据，就不会有重复反转的问题了。

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