Iview CheckGroup复选框 on-change事件踩坑记录~_iview checkbox on-change无效-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39994522/article/details/109222781

博主在项目中使用IView组件库的CheckboxGroup时遇到问题，发现官方文档中的`<CheckboxGroup>`写法有误，实际应为`<Checkbox-group>`。修正后，`@on-change`事件能正确返回选中的数组值。博主提醒开发者注意这一细节，避免踩坑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IView CheckGroup多选框 @on-change事件踩坑记录~

近期做项目需要使用IView组件库的CheckGroup复选框，通过复选框来选择并返回选择好的数组，然而按照官方文档的方法，无论如何都无法通过@on-change绑定的事件来获取到返回的值。最后发现是官方文档有误~废话不多说，直接上代码。希望对大家有所帮助。

官方版本

<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
 </CheckboxGroup>
<script>
    export default {
        data () {
            return {
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {
            checkAllGroupChange (data) {
      			console.log(data) //无返回，不报错
            }
        },
    }
</script>

正确版本

<Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox label="香蕉"></Checkbox>
        <Checkbox label="苹果"></Checkbox>
        <Checkbox label="西瓜"></Checkbox>
 </Checkbox-group>
<script>
    export default {
        data () {
            return {
                checkAllGroup: ['香蕉', '西瓜']
            }
        },
        methods: {
            checkAllGroupChange (data) {
      			console.log(data) //正确返回选中数组
            }
        },
    }