如何更新通过编程修改状态的Checkbox元素的v-model值？

Hey there! I ran into a similar issue with custom checkbox/switch plugins before—let me break down why this is happening and how to fix it.

问题根源 #

Vue的v-model是通过监听原生的input或change事件来实现数据双向绑定的。你用的这款JS插件，在用户点击切换按钮时，应该是正确触发了这些事件，所以active数据能同步更新。但当你通过代码直接修改DOM的checked属性时，插件并没有主动触发对应的事件，Vue也就没法感知到DOM的变化，自然不会更新active值。

解决方案（按推荐程度排序） #

1. 直接操作Vue的Data（最优解）

既然用了Vue，就应该遵循数据驱动DOM的理念，不要直接去修改DOM元素的属性。直接修改Vue实例里的active值，Vue会自动同步DOM状态，而且靠谱的插件也会监听DOM的变化来更新自身的UI：

// 不要这么做：
document.querySelector('.switch').checked = true;

// 要这么做：
app.active = true; // 如果是在Vue组件内部，就用this.active = true

2. 手动触发input/change事件

如果因为某些原因必须直接操作DOM，那修改checked属性后，记得手动触发对应的事件，让Vue感知到变化：

const checkboxEl = document.querySelector('.switch');
// 修改checked状态
checkboxEl.checked = !checkboxEl.checked;
// 触发input事件（v-model默认监听这个）
checkboxEl.dispatchEvent(new Event('input'));
// 如果插件更依赖change事件，也可以触发这个
// checkboxEl.dispatchEvent(new Event('change'));

3. 检查插件是否提供官方API

很多这类开关插件会提供专门的方法来控制状态，比如toggle()、setChecked(boolean)之类的。直接调用插件的API，它内部会正确处理DOM更新和事件触发，比自己操作DOM更稳妥。你可以去插件的文档里找找有没有相关方法。

示例代码 #

比如用第二种方法实现一个手动修改按钮：

<div id="app">
  <input type="checkbox" v-model="active" class="switch">
  <p>当前状态: {{ active }}</p>
  <button onclick="toggleCheckbox()">手动切换状态</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    active: false
  }
})

function toggleCheckbox() {
  const checkbox = document.querySelector('.switch');
  checkbox.checked = !checkbox.checked;
  checkbox.dispatchEvent(new Event('input'));
}
</script>

总结 #

优先选择直接操作Vue的data，这是最符合Vue设计思想的方式，也能避免很多DOM操作带来的问题。如果不得不操作DOM，一定要记得触发input或change事件来同步Vue的数据。

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