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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
js 页面输出值
Nov 30 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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执行sql语句的写法
2009/03/10 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
第一个Vue插件从封装到发布
2017/11/22 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
React Form组件的实现封装杂谈
2018/05/07 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python 统计代码行数简单实例
2017/05/04 Python
python实现京东秒杀功能
2018/07/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
厂长助理岗位职责
2013/12/27 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
运动会广播稿80字
2014/01/23 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
向领导表决心的话
2014/03/11 职场文书
办公设备采购方案
2014/03/16 职场文书
初中生物教学随笔
2015/08/15 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android