技術標籤：Vant UIvue.jsVant UIvan-checkbox

• 理想中的程式碼

<van-checkbox v-model="checkAll" shape="square" @change='handleCheckAll'>全選</van-checkbox>
<van-checkbox-group v-model="checked" @change="handleCheck">
	<van-checkbox
		class="item"
 

		v-for="(item, index) in data"
		shape="square"
		:name="item.id"
		:key="item.id">
		複選框{{index+1}}
	</van-checkbox>
</van-checkbox-group>

data () {
	return {
        data: [{id: 1},{id: 2},{id: 3}, {id: 4}],
        checked: [],
        checkAll:
 
 false
	}
},
methods: {
	handleCheckAll(val){
		this.checked = val ? this.data.map(item => item.id) : []
	},
	handleCheck(val){
		this.checkAll = this.checked.length === this.data.length
	}
}

哦豁，出現下圖中的問題。

全選之後，取消其中一項，全部都取消了？

接下來我在handleCheck事件裡列印了一下val，結果發現：

如圖中所示，取消了一項後，觸發了兩次，第二次直接清空了

於是我靈機一動，在handleCheckAll

handleCheckAll(val){
	let checkedCount = this.checked.length
	if (val) {
		this.checked = this.data.map(item => item.id)
	} else if (checkedCount === this.data.length) {
		this.checked = []
	}
},

接下來就可以愉快的使用啦

我查閱了官方也給出瞭解決方法，但我覺得比較繁瑣，沒有使用。
https://github.com/youzan/vant/issues/533