- 理想中的代码
<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