iview的checkbox多选框全选时校验问题

在用 iview 框架的 checkbox 多选框时 遇到了一个校验问题
在 iview 给的例子中 代码如下 https://www.iviewui.com/compo…

<template>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox
            :indeterminate="indeterminate"
            :value="checkAll"
            **@click.prevent.native="handleCheckAll"**> 全选 </Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
</template>
<script>
    export default {data () {
            return {
                indeterminate: true,
                checkAll: false,
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {handleCheckAll () {if (this.indeterminate) {this.checkAll = false;} else {this.checkAll = !this.checkAll;}
                this.indeterminate = false;

                if (this.checkAll) {this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
                } else {this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {if (data.length === 3) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        }
    }
</script>

上述代码标粗部分所用到的是 click 方法
但是在做表单校验的时候会出现一个问题，就是当你选择香蕉，苹果，西瓜时会触发 v -model = ‘checkAllGroup’ 绑定的校验方法，但是全选 / 不全选的时候，这个校验不会触发。

解决方法：把全选的 @click.prevent.native=”handleCheckAll” 方法 改成 @on-change=”handleCheckAll”
这个问题就会得到解决。