elementUI之switch应用的坑
前言:
因为项目中用到了饿了么出品的element-ui这一套ui框架,所以很多地方都踩在了坑里,前面碰到了一些,今天着重聊一下switch这个组件。
首先switch接受Boolean类型的数据,莫非是true和false。
对switch进行赋值,我们就需要从后端传过来数据。我数据库里存放的数据也确实是bool,
后得知mysql是需要用tinyInt来代替boolean类型的,但是传输是要全部转化成字符串传输的。
因为vue的data里面的数据已经和switch做了绑定,
所以从后端传过来的数据无论是什么类型,一旦放到vue的data里面,就会被element-ui的switch强制转换成bool类型,
但是因为没有识别到boolean类型的数据,所以一直打印出来的结构都是false。
解决方案:
其实方法很简单的,可能只是觉得很蹊跷,就钻到了这个漩涡里爬不出来了。越过山丘~就是柳暗花明,
我只需要把数据拿过来循环遍历重新给需要的部分赋予bool值就解决了这个问题。
elementUI之switch应用的坑的更多相关文章
- element-ui 中Switch的用法
在element-ui中,如果你想知道Switch是开还是关,使用事件 @change="getchange(value2)" 它会输出true或者false.true代表的是开, ...
- element-ui 中 switch 开关绑定number 的解决方法
虽然element-ui 的文档中说明 v-model的值可以是 boolean / string / number 三种类型 , (文档在此)https://element.eleme.cn/#/z ...
- bootstrap Switch 的一个坑点
在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...
- 使用 element-ui 级联插件遇到的坑
需求描述[省市区三级联动] 组件:Cascader 级联选择器 后端需要所选中的地区的名字,如:['北京市', '北京市', '东城区'] 获取后端省市区具体列表的接口返回数据: // 省 - 参数1 ...
- ElementUI 源码定制防坑指南
背景 我司OA系统公文管理模块Office在线编辑使用的是金格IWebOffice中间件[PPAPI插件,通过<object>标签加载],IWebOffice在chrome中设置div盒子 ...
- element-UI select 踩过的坑和解决办法
今天遇到了一个bug,就是在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态.可以看到select框还是处于颜色 ...
- 关于react-router 路径改变页面没有刷新
routert.js 中: <Router> <Switch> <Route exact path="/" component={Login}> ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- element-ui switch组件源码分析整理笔记(二)
源码如下: <template> <div class="el-switch" :class="{ 'is-disabled': switchDisab ...
随机推荐
- vue-i18n国际化实例
demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化 1.我们得先有开发环境,先有项 ...
- Axios介绍和使用
一.介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 官方资料和介绍 从浏览器中创建 XMLHttpRequests 从 node.js 创建 h ...
- 将ojdbc 添加到maven
去oracle官网下载jar包 然后在jar包所在目录输入maven命令 mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdb ...
- zookeeper安装及使用
0. 下载并安装 1. 开机启动 cd /etc/rc.d/init.d touch zookeeper vi zookeeper #!/bin/bash #chkconfig #descripti ...
- IE6 行内定义成块元素后高度失效
问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...
- 沙盒 sandbox 简记随笔
沙盒又称沙箱(sandbox),是一种按照 安全策略 限制 程序行为 的 执行环境. “沙盒”技术的实践运用流程是: 1. 让疑似病毒文件的可疑行为在虚拟的“沙盒”里充分运行,“沙盒”会记下 ...
- day22笔记
用户上传的文件要保存 保存在服务器上的media文件夹下,用户上传的文件很多,所以需要分目录进行存放具体步骤 settings.pyMEDIA_URL="/media/"MEDIA ...
- nodejs + redis/mysql 连接池问题
nodejs + redis/mysql 连接池问题 需不需要连接池 连接池的作用主要是较少每次临时建立连接所带来的开销.初步一看,nodejs运行单线程上,它不能同时使用多个连接,乍一看是不需要连接 ...
- JAVA中的那些名词解释!
1.JDO: (Java Data Object )是Java对象持久化的新的规范,也是一个用于存取某种数据仓库中的对象的标准化API.作用:用于存取某种数据仓库中的对象 2.JPA: JPA是Jav ...
- Linux->ZooKeeper集群搭建
人,总免不了有心结,限制着自己,难以前行.对于ZooKeeper的理解,以及实践也拖了很久,今天用零散时间学习一下,补点干货. 一.简述 Zookeeper是Google的Chubby一个开源的实现, ...