Vue动态生成el-checkbox点击无法赋值的解决方法


Posted in Javascript onFebruary 21, 2019

前言

最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的

例如:

定义的 data 的 form 里面是空对象,需要动态生成里面的 key

export default {
 data() {
 return {
  form: {}
 }
 },
}

从后端接口得到 checkList,这个就是动态生成的表单数据

v-for 循环 checkList,得到 key,然后直接 v-model=“form.key” 动态生成 form 里面的 key

<el-form-item :label="item1.name+`:`" v-for="item1 in checkList" :key="item1.id">
 <el-checkbox-group v-model="form[`${item1.code}`]">
 <el-checkbox
  :label="item2.id"
  v-for="item2 in item1.values"
  :key="item2.id">
  {{ item2.value }}
 </el-checkbox>
 </el-checkbox-group>
</el-form-item>

问题来了

当页面点击动态生成的 CheckBox 方框,会出现全选的情况,查看 vue 数据,显示如下:

Vue动态生成el-checkbox点击无法赋值的解决方法

绑定的数据居然是 Boolean 类型,怪不得会出现要么全部勾选,要不全部不选

正常的情况 CheckBox 的绑定数据类型是数组形式

假设我在动态生成的时候,就它置为数组格式:

this.checkList.forEach(item => {
 let key = item.code
 this.form[key] = []
})

但发现还是没用,会发现点击任何 CheckBox 都无法勾选

解决

这是 vue 的深入响应式原理,官方说法和解决方法:

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)

然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

现在明白了,可以使用 Vue.set 方法解决这个深入式响应原理

this.checkList.forEach(item => {
 let key = item.code
 this.$set(this.form, key, [])
})

完美解决~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
JS常见算法详解
Feb 28 Javascript
详解Layer弹出层样式
Aug 21 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 #Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 #Javascript
Vue实现table上下移动功能示例
Feb 21 #Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 #Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 #Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 #Javascript
You might like
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
json 定义
2008/06/10 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
详解Python中的__new__()方法的使用
2015/04/09 Python
python妹子图简单爬虫实例
2015/07/07 Python
python合并同类型excel表格的方法
2018/04/01 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Django 返回json数据的实现示例
2020/03/05 Python
django中related_name的用法说明
2020/05/20 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
Linux的主要特性
2014/10/06 面试题
大学生职业生涯规划书
2014/03/14 职场文书
建筑工地标语
2014/06/18 职场文书
应届生找工作求职信
2014/06/24 职场文书
营销计划书范文
2015/01/17 职场文书
悬空寺导游词
2015/02/05 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
2015年度保密工作总结
2015/04/24 职场文书
董事长秘书工作总结
2015/08/14 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL