uni-app使用checkbox-group点一次点击失效问题

uni-app使用checkbox-group点一次点击失效

最近一个项目需要使用复选列表，自然就需要使用checkbox-group控件
，但是在运行测试页面时发现第一次点击无效。

无效情况描述

使用v-for循环生成了一个chebox列表，如图列表内容
第一项我在程序内默认选中，这时我点击第二项，发现，第一项选中状态消失了，而且第二项也未被选中。而随后的点击都能正常的切换状态，也就是说，只有第一次点击是错误的。

产生问题的代码

首先贴一下我渲染列表的代码：
<checkbox-group @change="checkboxChange"> <label v-for="item in workgroup" :key="item.id"> <view> <checkbox :value="item.id" :checked="item.isSlected" /> </view> <view>{{item.name}}</view> </label> </checkbox-group>
JS：

<script>
	export default {
		data() {
			return {
				workgroup:[
					{name: '张三',id:'1' isSlected:true},{name: '张三',id:'2'},{name: '张三',id:3},{name: '张三',id:4},
					{name: '张三',id:5},{name: '张三',id:6},{name: '张三',id:7},{name: '张三'，id:8},
					],
			};
		},
		methods: {
			checkboxChange: function (e) {
				var items = this.workgroup;
				var	values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; i++) {
					const item = items[i];
					if(values.includes(item.id)){
						this.$set(item,'isSlected',true)
					}else{
						this.$set(item,'isSlected',false)
					}
				}
			}
		}
	}
</script>

尝试解决问题

分析错误现象，第一次点击，第一项的默认选中效果会消失，那么我在程序里默认或者说认为的设置为真会怎么样呢？

methods: {
			checkboxChange: function (e) {
				var items = this.workgroup;
				var	values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; i++) {
					const item = items[i];
					items[0].isSlected = true;    //第一项人为设置为选中
					if(values.includes(item.id)){
						this.$set(item,'isSlected',true)
					}else{
						this.$set(item,'isSlected',false)
					}
				}
			}
		}

额，这个时候第一项的选中状态确实能够显示了，但是当第一次点击非第一项的时候会发现其他项仍无法呈选中状态。看来问题并没有得到解决。
回过头看第一项和其他项的区别，那是不是其他项isSlected属性缺少导致呢？有了这个想法，着手补全所有项信息。

{name: '张三'isSlected:true,,id:1},{name: '张三',isSlected:false,id:'2'},{name: '张三',isSlected:false,id:3},{name: '张三',isSlected:false,id:4},
{name: '张三',isSlected:false,id:5},{name: '张三',isSlected:false,id:6},{name: '张三',isSlected:false,id:7},{name: '张三',isSlected:false,id:8},

再次运行，发现问题被解决了。

错误的真相

虽然上面的方法能够巧合的解决错误，不过这并非错误导致的真实原因。
那么到底是什么原因导致了这个问题呢!还是得回到代码。
注意在程序中，我们的id属性类型为number。而在我们的事件处理函数中var values = e.detail.value;获取到的是一个字符串。由于两者类型不一致，导致程序第一次点击的时候发生了意外。看到这解决问题的办法就豁然开朗了。

真正的解决办法

就是将对象的id属性定义为字符串，即id:‘1’
这样就可完美解决问题了。