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

源码

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

相关推荐
仰望星空的凡人9 分钟前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus1 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉1 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6661 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus2 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus2 小时前
react-router-dom中的几种路由详解
前端·react.js
若梦plus2 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan2 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
OEC小胖胖2 小时前
渲染篇(二):解密Diff算法:如何用“最少的操作”更新UI
前端·算法·ui·状态模式·web