一,场景

通过使用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的坑的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  3. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  4. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  5. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  6. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  7. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

  8. Vue结合Element UI实战

    创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...

  9. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

随机推荐

  1. Fresco添加HTTP请求头

    项目中用Fresco来管理图片由于服务器图片有不同的版本需要根据客户端的屏幕密度来选择不同的图片共享一份用OkHttp下载图片并添加HTTP头代码. public class OkHttpNetwor ...

  2. springboot 集成Redis单机

    1.redis服务搭建 centos7 搭建redis服务 2.接入相关 pom文件依赖引入 <dependencies> <dependency> <groupId&g ...

  3. Flask基础(13)-->Flask扩展Flask-Script

    Flask基础(12)-->Flask扩展Flask-Script # 前提是安装了Flask-Script # 联网运行 pip install flask-script from flask ...

  4. ping本地局域网

    #!/bin/bash for i in `seq 1 254` do ping -c 1 192.168.192.$i > /dev/null if [ $? -eq 0 ];then ech ...

  5. python编程基础之三十五

    系统的魔术方法:系统的魔术方法特别多,但是也都特别容易懂,简单的讲就是对系统的内置函数进行重写,你需要什么效果就重写成什么样, 比如说len()方法针对的对象本来没有自定义类的对象,但是当你重写了__ ...

  6. wampserver 运行橙色,80端口没有被占用,查看错误日志方法

    wampserver运行时橙色,经检查80端口并没有被占用,试了很多种方法都无效,去查看错误日志吧 1.以管理员身份打开CMD 注意这里必须是管理员身份的CMD ,powershell不行的 进入wa ...

  7. Python3实战spark大数据分析及调度 ☝☝☝

    Python3实战spark大数据分析及调度  ☝☝☝ 一.实例分析 1.1 数据 student.txt 1.2 代码 二.代码解析 2.1函数解析 2.1.1 collect() RDD的特性 在 ...

  8. drf框架中认证与权限工作原理及设置

    0909自我总结 drf框架中认证与权限工作原理及设置 一.概述 1.认证 工作原理 返回None => 游客 返回user,auth => 登录用户 抛出异常 => 非法用户 前台 ...

  9. C++11多线程相关

    有关线程的知识,从C++11开始有了一些变化,作为初学者,对其先有个初步认识,后面用到的时候再详细剖析

  10. php函数fsockopen的使用

    函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...