vue checkbox-group和checkbox动态生成，问题解决

liudongyang1232023-09-09 12:32

源码

javascript 复制代码

 <el-checkbox-group v-model="form[keyItem.name]">
              <el-checkbox
                v-for="(checkboxItem,cindex) in keyItem.options.split(',')"
                :key="cindex"
                :label="checkboxItem">
              </el-checkbox>
            </el-checkbox-group>

我是根据后台返回的数据动态生成的，keyItem.name，是我的属性名称。

遇到问题，

一、<el-checkbox-group v-model="form[keyItem.name]">

问题描述：

这个v-model按照官方文档和多方资料意思就是必须要是一个集合，而且还得是空的，但是我的是根据后台返回的数据，动态生成的，这就导致了我没办法在return->data 中定义空数组，查找资料

解决办法：

在获取到后台数据后，增加一个方法，这个方式是处理checkbox的空集合的，也就是说在form中将checkbox类型的属性，指定为空集合，重点是下面这个代码。

复制代码

this.$set(this.form, keyItem.name, [])

javascript 复制代码

dealCheckbox(){
      this.groupList.forEach(item => {
        item.keysList.forEach(keyItem => {
          let type = keyItem.type
          if(type == 'checkbox'){
            this.$set(this.form, keyItem.name, [])
          }
        });

      });
      console.log(this.form)
    },

二、一定要注意vue或者说elementui中的每个属性的拼写，我就是在按照网上的把处理方法加上后死活不管用，最后随意的一瞥。v-model拼写错误，内心崩溃死了。