Bug情景再现<template> <div class=“store-box”> <div v-for="(day, d) in dayList" class=“checkItem-box”> <span>{{day}}</span> <el-checkbox-group v-model=“storeItem.arrange[d]"> <el-checkbox :label=“1”>上午</el-checkbox> <el-checkbox :label=“2”>下午</el-checkbox> <el-checkbox :label=“3”>晚上</el-checkbox> </el-checkbox-group> </div> </div></template><script>export default{ data(){ dayList: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’], storeItem: { arrange: [] }, }, mounted(){ const week = [ [1,2], //周一的选择情况 [1], //周二的选择情况 [], //周三的选择情况 [2,3], //周四的选择情况 [2,1], [1,2,3], [3] ] //为checkbox-group 赋值 this.storeItem.arrange = week; }}</script>得到这样的结果：但是当我们点击其它选择框的时候，没有反应。尝试解决最先想到的原因应该是vue没有对arrange的改变监控到， 于是解决办法是使用 vue. setthis.$set(this.storeItem, ‘arrange’, week)这样修改后确实也起作用了。⭐ 注意：这里使用 vue.set 起作用根本是，瞎猫碰上死耗子，<el-checkbox-group>不能相响应的原因根本不是这个而且我们仔细读 Vue 的官方文档Vue.set( target, key, value )作用是向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)这里我们根本没有添加 arrange属性，而只是去改变了arrange 属性的值，vue按理说应该是能够检测到的。后面的实验也认证了我的观点。实验：让我们再把表单复杂一些。注：部分代码已经省略<template> <div v-for="(store, st) in serviceStoreList” class=“store-box”> <label>{{store.name}}</label> <div v-for="(day, d) in dayList" class=“checkItem-box”> <span>{{day}}</span> <el-checkbox-group v-model=“store.arrange[d]"> <el-checkbox :label=“1”>上午</el-checkbox> <el-checkbox :label=“2”>下午</el-checkbox> <el-checkbox :label=“3”>晚上</el-checkbox> </el-checkbox-group> </div> </div></template><script>export default{ data(){ dayList: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’], serviceStoreList: [ name: ‘’, arrange: [], ], }, mounted(){ const week = [ [1,2], //周一的选择情况 [1], //周二的选择情况 [], //周三的选择情况 [2,3], //周四的选择情况 [2,1], [1,2,3], [3] ] //为checkbox-group 赋值 for (let i=0; i<3; i++){ this.serviceStoreList[i].name = 这是 ${i} 号; this.serviceStoreList[i].arrange = week; } }}</script>这样写了之后， checkBox 还是： 能够展示勾选，但是点击其它选择框没有任何反应。于是我们将 mounted 里面的代码改成const week = [ [1,2], //周一的选择情况 [1], //周二的选择情况 [], //周三的选择情况 [2,3], //周四的选择情况 [2,1], [1,2,3], [3] ] //为checkbox-group 赋值 const _obj = {}; const self = this; for (let i=0; i<3; i++){ _obj = {}; _obj.name = 这是 ${i} 号; _obj.arrange = week; self.$set(self.serviceStoreList, i, _obj) // 或 self.serviceStoreList.splice(i, 1, _obj) }还是不会起任何作用，点击其它选择框依然是点不动，不能进行交互。这里我反复实验了几次，发现了一个特殊的现象。就是当你去点击其它选择框的时候， vue-devtool 里面显示的数据其实是已经改变了的。而且，当你点击了一个checkBox， 然后去填写另外的一个表单项，比如去选择下拉，或者填写其它<el-input> 的时候，checkBox 立刻就改变了。相当于它之前的v-model 的数据其实是正常的，只是视图卡住了。最后的解决办法vue 的数据没有问题，那么肯定是 element 埋下的坑。个人认为 <el-checkbox-group> 与 <el-check> 的数据同步有些问题。这样写就好了<el-checkbox-group v-model=“store.arrange[d]"> <el-checkbox :label=“1” :checked=“checked” @change=“checked=!checked”>上午</el-checkbox> <el-checkbox :label=“2” :checked=“checked” @change=“checked=!checked”>下午</el-checkbox> <el-checkbox :label=“3” :checked=“checked” @change=“checked=!checked”>晚上</el-checkbox></el-checkbox-group>//data 里面增加一个字段data (){ checked：false , //这个 checked没有任何作用，只是为了绕开elment 的这个坑}这样我们不用设置 vue.set（因为vue 其实重头到尾都能够监视到数据的改变）const week = [ [1,2], //周一的选择情况 [1], //周二的选择情况 [], //周三的选择情况 [2,3], //周四的选择情况 [2,1], [1,2,3], [3] ]//为checkbox-group 赋值const _obj = {};const _store = [];for (let i=0; i<3; i++){ _obj = {}; _obj.name = 这是 ${i} 号; _obj.arrange = week; _store.push(_obj);}this.checked = false; //需将checked 设置为false，不然选择框可能会出现全部选中的情况this.serviceStoreList = _store; //直接设置，checkbox也能正常交互心得vue 只是 无法探测普通的新增属性 ，但是 Vue 能够探测到data 里面已经注册过的对象的改变，比如重新给这个对象赋值，或改变它已经注册过的属性的值（非给它新增其它属性）。无论这个对象的数据结构有多么的复杂。少用 vue.set, 多在 <el-check> 上面显示指明 @change，让它状态改变。再每次修改 <el-checkbox-group> 的 v-model 的值的时候，先将 checked 设置为 false1. this.checked = false2. this.serviceStoreList = _store