vue checkbox-group和checkbox动态生成，问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue checkbox-group和checkbox动态生成，问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

源码

 <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, [])

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拼写错误，内心崩溃死了。

vue checkbox-group和checkbox动态生成，问题解决,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-706830.html