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

我不是女神ヾ 2021-09-18 20:44 891阅读 0赞

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

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

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

## 无效情况描述 ##

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

## 产生问题的代码 ##

首先贴一下我渲染列表的代码：  
`<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：

## 尝试解决问题 ##

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

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’  
这样就可完美解决问题了。

[20190409153713567.png]: /images/20210726/4bd60a00bc6b4c90908c5dac95c1525a.png