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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP使用递归生成文章树
2015/04/21 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python实现二维数组输出为图片
2018/04/03 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS