业务场景/遇到的问题

需要动态生成多个复选框,那么v-model就需要一个array值。

解决方法

vue官网中深入理解响应式原理中有描述:

对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如,对于:

Vue.set(vm.someObject, 'b', 2)

实现代码

<template>
    <el-checkbox-group 
        v-model="checkList[index]" 
        v-for="(item,index) in 5"
        :key="index">
        <el-checkbox>
        </el-checkbox>
    </el-checkbox-group>
</template>

export default {
    created(){
        for(const index in 5){
            this.$set(this.checkList,index, [])
        }
    },
    data(){
        return {
            checkList: {},
        }
    }
}

 

Logo

前往低代码交流专区

更多推荐