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’

這樣就可完美解決問題了。