问题描述
代码如下，在mounted中修改checkbox的值，设想应该会触发change事件，但实际上并没有触发。
<template>
<el-checkbox v-model="checkBox" @change="change">测试</el-checkbox>
</template>
<script>
export default{
data() {
return {
checkBox: false,
}
},
methods:{
change(){
console.log('改变了值')
}
},
mounted(){
this.checkBox = true
}
}
</script>
复制代码原因探究过程
是 v-model 的bug吗？
现在回头去看我遇到的问题：点击按钮，用 js 直接修改 flag 的值后，checkbox的勾选状态变了，但是 没有触发change事件
checkbox 的勾选状态改变了，说明 数据更新 => 视图更新 这条链没有问题，v-model 已经完成了它的使命。
推测，可能问题不在 vue ，而在原生的 js 和 html 上！
大胆假设
我的猜想：用js去修改 checkbox 的 checked 属性，不会触发 change 事件
代码：
<body>
<section id="app">
<button onclick="alterCheckboxValue()">切换！</button>
<input type="checkbox" id="checkbox1" onchange="handleChange()">
</section>
<script>
function alterCheckboxValue() {
const el = document.querySelector("#checkbox1");
el.checked = !el.checked;
}
function handleChange(e) {
console.log("触发change事件");
}
</script>
</body>
复制代码结果如下图，证实了猜想：
结论
用 js 去修改 checkbox 的 checked 属性，不会触发change事件
所以，想要全方位监听 checkbox 的变化，只能：
- 用户的操作用
change事件监听 - 自己用 js 修改的时候，自己在后面写处理函数
查看el-checkbox源码
版本：element-ui": "^2.15.6
查看源码可以看到，当绑定的值变化后，并没有触发这个 handleChange事件
watch: {
// el-checkbox绑定的值
value(value) {
this.dispatch('ElFormItem', 'el.form.change', value);
}
}
复制代码解决
重新封装el-checkbox，添加vaule的监听属性，触发change事件
<template>
<el-checkbox v-model="value"></el-checkbox>
</template>
<script>
export default {
name: 'my-checkBox',
props: {
value: Boolean | String,
change: {
type: Function,
default: ()=>{}
}
},
watch: {
value() {
console.log(this.value)
this.$emit('change', this.value)
}
}
}
</script>
复制代码