问题描述

代码如下，在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>
复制代码

原因探究过程

参考：blog.csdn.net/tangran0526…

是 v-model 的bug吗？

www.yuque.com/nicander/mp…

现在回头去看我遇到的问题：点击按钮，用 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>
复制代码