vue与element ui的el-checkbox的坑
一,场景
通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态。
二, 官网的例子
通过切换checked值为true或者false来实现,一个checkbox的状态切换
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
效果如下:
三, 思考。
通过循环li, 给数据添加checked属性,并绑定到v-model上,来实现 一的场景。模板代码如下:
<template>
<div class="demo">
<ul>
<li v-for="(item, index) in list" :key="index"> //循环li
<el-checkbox v-model="item.checked"> //v-model绑定到每个item的checked属性
{{ item.name }}
</el-checkbox>
</li>
</ul>
</div>
</template>
后台返回数据格式(已精简),如下(没有checked属性)
[
{ id: 1, pid: 1, name: '地区' },
{ id: 2, pid: 2, name: '游戏类型' },
{ id: 3, pid: 4, name: '性别' },
{ id: 4, pid: 5, name: '设备类型' },
{ id: 5, pid: 6, name: '休闲时间' },
{ id: 6, pid: 7, name: '王者荣耀' },
{ id: 7, pid: 8, name: '音乐' },
{ id: 8, pid: 9, name: '品牌手表' },
{ id: 9, pid: 10, name: '相机' },
{ id: 10, pid: 12, name: '游戏人群' },
]
我要做的, mounted方法获取后台数据,再给每条数据循环添加checked属性,初始值为false。
<script>
export default {
name: 'demo',
data() {
return {
list: [],
allTags: [],
}
},
methods: {
getList() {
//获取数据用settimeout模拟
setTimeout(() => {
this.allTags = [
{ id: 1, pid: 1, name: '地区' },
{ id: 2, pid: 2, name: '游戏类型' },
{ id: 3, pid: 4, name: '性别' },
{ id: 4, pid: 5, name: '设备类型' },
{ id: 5, pid: 6, name: '休闲时间' },
{ id: 6, pid: 7, name: '王者荣耀' },
{ id: 7, pid: 8, name: '音乐' },
{ id: 8, pid: 9, name: '品牌手表' },
{ id: 9, pid: 10, name: '相机' },
{ id: 10, pid: 12, name: '游戏人群' },
]
this.allTags.map(item => {
item.checked = false
return item
})
this.list = this.allTags
}, 1500)
},
},
mounted() {
this.getList()
},
}
</script>
到这以为实现了功能,看效果发现问题: 点击时候,没有勾上,只有框变了颜色。
排查问题.....
(脑补痛苦过程......)
猜测:
1,element不支持这种方法绑定,只能按官网例子中,循环el-checkbox来实现。
2,vue绑定问题
针对问题1: 换成了循环el-checkbox,发现结果是一样的不行。 否定!
剩下的就是猜测二:
人为把返回数据默认加上checked属性, 即data格式为:
[
{ id: 1, pid: 1, name: '地区', checked: false},
{ id: 2, pid: 2, name: '游戏类型' , checked: false},
{ id: 3, pid: 4, name: '性别' , checked: false},
{ id: 4, pid: 5, name: '设备类型' , checked: false},
{ id: 5, pid: 6, name: '休闲时间' , checked: false},
{ id: 6, pid: 7, name: '王者荣耀', checked: false },
{ id: 7, pid: 8, name: '音乐', checked: false },
{ id: 8, pid: 9, name: '品牌手表' , checked: false},
{ id: 9, pid: 10, name: '相机' , checked: false},
{ id: 10, pid: 12, name: '游戏人群' , checked: false},
]
测试发现,这样可以。
迷茫。。。
然后在控制台打印数据,对比了一下结果。
前端添加checked属性的情况 和 后台返回数据本来就有checked属性情况 打印出来分别如 1 和 图2
图1 图2
对比一下发现,前端添加checked属性, vue并没有添加get set方法,因此,监听不到checked值变化,进而不能更新view。这点,可以在浏览器vue调试中看到,点击时候 数据的checked属性 true和false是在交替变化,但是view上没同步更新。截了个图
四,解决方法
两种方法,
1, 拿到值不赋值给data属性的allTags,而是定义临时变量let, 操作完之后,赋值给list,即:
<script>
export default {
name: 'demo',
data() {
return {
list: [],
}
},
methods: {
getList() {
//获取数据用settimeout模拟
setTimeout(() => {
let allTags = [ //这里let定义allTags
{ id: 1, pid: 1, name: '地区' },
{ id: 2, pid: 2, name: '游戏类型' },
{ id: 3, pid: 4, name: '性别' },
{ id: 4, pid: 5, name: '设备类型' },
{ id: 5, pid: 6, name: '休闲时间' },
{ id: 6, pid: 7, name: '王者荣耀' },
{ id: 7, pid: 8, name: '音乐' },
{ id: 8, pid: 9, name: '品牌手表' },
{ id: 9, pid: 10, name: '相机' },
{ id: 10, pid: 12, name: '游戏人群' },
]
allTags.map(item => {
item.checked = false
return item
})
this.list = allTags
}, 1500)
},
},
mounted() {
this.getList()
},
}
</script>
2(推荐),用vue.$set方法,强制vue监听checked属性
<script>
export default {
name: 'demo',
data() {
return {
list: [],
}
},
methods: {
getList() {
//获取数据用settimeout模拟
setTimeout(() => {
this.allTags = [ //这里let定义allTags
{ id: 1, pid: 1, name: '地区' },
{ id: 2, pid: 2, name: '游戏类型' },
{ id: 3, pid: 4, name: '性别' },
{ id: 4, pid: 5, name: '设备类型' },
{ id: 5, pid: 6, name: '休闲时间' },
{ id: 6, pid: 7, name: '王者荣耀' },
{ id: 7, pid: 8, name: '音乐' },
{ id: 8, pid: 9, name: '品牌手表' },
{ id: 9, pid: 10, name: '相机' },
{ id: 10, pid: 12, name: '游戏人群' },
]
this.allTags.map(item => {
//item.checked = false
this.$set(item, 'checked', false) // 这里,给对象添加属性,用$set方法。
return item
})
this.list = this.allTags
}, 1500)
},
},
mounted() {
this.getList()
},
}
</script>
done!!
五,总结。
这个问题是我在项目中遇到的问题,通过一步一步锁定问题之后,抽出来做了最精简版本,故做此总结,也给其他遇到坑的童鞋一点点帮助。
ps,每次用element ui 都会有一些感触,苦笑。
vue与element ui的el-checkbox的坑的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- 第五十三篇:Vue安装Element ui
好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- Vue.js + Element.ui 从搭建环境到打包部署
一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...
- Vue结合Element UI实战
创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
随机推荐
- 《深度解析Tomcat》 第一章 一个简单的Web服务器
本章介绍Java Web服务器是如何运行的.从中可以知道Tomcat是如何工作的. 基于Java的Web服务器会使用java.net.Socket类和java.net.ServerSocket类这两个 ...
- 23种设计模式之模板方法(Template Pattern)
定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤 AbstractClass:抽象类.用来定义算法骨架和原语操作,在这个类里 ...
- 004-python面向对象,错误,调试和测试
---恢复内容开始--- 1.面向对象 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作 ...
- 基于vue-cli3.11.0创建创建vue项目
如果电脑已安装vue-cli2.9.6,需要先卸载,然后重装vue-cli3.11.0操作如下 等待几分钟,卸载完成,输入npm install -g @vue/cli 等待安装完成,输入vue -V ...
- Python3 学习笔记之 变量/字符串/if/while/逻辑运算符/模块引用
变量/if/while/逻辑运算符/模块引用: 变量: 使用变量前必须先赋值. 大小写区分. Python创建字符串,在字符串两边可以加上单引号或者双引号. 打印单引号或双引号,使用转移\ 使用\进行 ...
- Windows10+YOLOv3实现检测自己的数据集(1)——制作自己的数据集
本文将从以下三个方面介绍如何制作自己的数据集 数据标注 数据扩增 将数据转化为COCO的json格式 参考资料 一.数据标注 在深度学习的目标检测任务中,首先要使用训练集进行模型训练.训练的数据集好坏 ...
- 【SQL】sql统计不同类别的不同状态的数目
例子:某主机下有5149个设备,设备分不同类别,设备运行会有不同状态(1-正常.2-告警.3-故障.0-离线) sql: SELECT t.DEVICE_TYPE_NAME,SUM(CASE t.DE ...
- 致所有.Net者和有梦想的朋友们 - 共勉
这篇文章很早就想写的了,主要是人到了一定的年纪,就想唠叨一些看法,认不认可不重要,重要的是生活给予你的酸甜苦辣,你都想一吐为快. 这里主要基于多年来自己的一个行业感受和以及生活感想,唠叨一下工作以及生 ...
- DG常用运维命令及常见问题解决
DG常见运维命令及常见问题解决方法 l> DG库启动.关闭标准操作Dataguard关闭1).先取消日志应用alter database recover managed standby data ...
- Spring基础(二)
一.使用注解配置Spring 1.1步骤 --配置文件中,指明注解位置 --要用的地方打上注解 --改对象的作用范围(修改掉默认的单例,变多例) --属性的注入(两种) 使用的反射实现 set方法实现 ...