前言:

因为项目中用到了饿了么出品的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应用的坑的更多相关文章

  1. element-ui 中Switch的用法

    在element-ui中,如果你想知道Switch是开还是关,使用事件 @change="getchange(value2)" 它会输出true或者false.true代表的是开, ...

  2. element-ui 中 switch 开关绑定number 的解决方法

    虽然element-ui 的文档中说明 v-model的值可以是 boolean / string / number 三种类型 , (文档在此)https://element.eleme.cn/#/z ...

  3. bootstrap Switch 的一个坑点

    在bootstrap的modal点开的时候改变bootstrapSwitch的状态的时候,会出现第一次打开modal,switch没有变化,第二次以后打开modal才会改变,这个问题找了好久没有找到答 ...

  4. 使用 element-ui 级联插件遇到的坑

    需求描述[省市区三级联动] 组件:Cascader 级联选择器 后端需要所选中的地区的名字,如:['北京市', '北京市', '东城区'] 获取后端省市区具体列表的接口返回数据: // 省 - 参数1 ...

  5. ElementUI 源码定制防坑指南

    背景 我司OA系统公文管理模块Office在线编辑使用的是金格IWebOffice中间件[PPAPI插件,通过<object>标签加载],IWebOffice在chrome中设置div盒子 ...

  6. element-UI select 踩过的坑和解决办法

    今天遇到了一个bug,就是在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态.可以看到select框还是处于颜色 ...

  7. 关于react-router 路径改变页面没有刷新

    routert.js 中: <Router> <Switch> <Route exact path="/" component={Login}> ...

  8. [坑况]饿了么你是这样的前端——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/ ...

  9. element-ui switch组件源码分析整理笔记(二)

    源码如下: <template> <div class="el-switch" :class="{ 'is-disabled': switchDisab ...

随机推荐

  1. Docker安装和状态查询指令

    1 .安装 Docker $ yum install -y docker-engine 2.启动docker $systemctl start docker.service 3.验证安装是否成功(有c ...

  2. 你必须知道的get与post的真正区别

    我们会经常看到有人问:http协议中GET请求和POST请求有什么区别~? 这个问题看似很简单,但是不同程度的人会回答出不同的结果.在公司的面试中,也会经常的问及类似这样的问题,看似很简单,但是不同层 ...

  3. Java jdbc入门

    1 jdbc入门 1.1 之前操作数据 1)通过mysql的客户端工具,登录数据库服务器  (mysql -u root -p 密码) 2)编写sql语句 3)发送sql语句到数据库服务器执行 1.2 ...

  4. Android SQLite案例

    重点掌握execSQL()和rawQuery()方法,rawQuery()方法用于执行select语句. SQLiteOpenHelper,实现了onCreate和onUpgrade方法. 第一次创建 ...

  5. 面试准备之三Django知识

    Django请求流程 MTV模式 路由 视图 ORM 模板

  6. redis 在linux安装

    转自:http://futeng.iteye.com/blog/2071867 下载 官网下载 安装 tar zxvf redis-2.8.9.tar.gz cd redis-2.8.9 #直接mak ...

  7. javascript tips and snippets

    如何给javascript对象动态创建动态key // ES2015 var key = 'DYNAMIC_KEY', obj = { [key]: 'ES6!' }; console.log(obj ...

  8. SQLSERVER 中GO的作用

    go 向 SQL Server 实用工具发出一批 Transact-SQL 语句结束的信号.go是把t-sql语句分批次执行.(一步成功了才会执行下一步,即一步一个go) BEGIN 和 END 语句 ...

  9. order by注入点利用方式分析

    漏洞分析 使用sqli-lab中的lesson-52作为测试目标.关键代码为: error_reporting(0); $id=$_GET['sort']; if(isset($id)) { //lo ...

  10. DataS-2

    2.4 证明对任意常数k,(称此式为公式A) 证明: ①当k1<k2时,,因此只需证明正数对公式A成立: ②当k=0或1时,显然有和满足公式A: ③假设k<i (i>1)时,都满足公 ...