前言:

因为项目中用到了饿了么出品的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. 多实例部署多个tomcat

    注意点: 1.多实例tomcat的更新维护,需要考虑如何能“优雅”地对所有实例进行升级: 2.尽量不要影响应用程序,在更新tomcat时,一不小心就把conf目录等全部覆盖,所以尽量要把配置文件和安装 ...

  2. mybatis整合spring的时候配置数据库信息文件properties注意事项

    信息后面不能有空格 ,格式要xxx.driver xxx.url 这样

  3. 1003. 猜数游戏 (Standard IO)

    题目描述 有一个“就是它”的猜数游戏,步骤如下:请你对任意输入的一个三位数x,在这三位数后重复一遍,得到一个六位数,467-->467467.把这个数连续除以7.11.13,输出最后的商. 输入 ...

  4. <Android 应用 之路> 百度地图API使用(1)

    简介 详情请看百度地图官方网站 http://lbsyun.baidu.com/index.php?title=androidsdk/guide/introduction 使用方式 申请密钥,针对移动 ...

  5. 定期重启SSRS 服务

    SSRS 在执行了一段时间之后会变得非常卡,遇到好几次内存暴涨,CPU100%的情况. 但是在查询了一通以后发现,这个时间没有人在运行报告,不知道是哪里有问题,没有回收... 所以决定定期在晚上没有不 ...

  6. linux php多版本

    ecshop还非php5.2 解压 gzip -cd php-5.2.14-fpm-0.5.14.diff.gz | patch -d php-5.2.14 -p1 打上php-fpm补丁再安装php ...

  7. 【创客+】偷心锁屏创始人Jerry创业心得分享

    偷心锁屏创始人Jerry创业心得分享 作者:Jerry权泉,偷心锁屏创始人 我创业的起因非常偶然.08年在东京早稻田大学读博士期间,每周六都去社区活动中心跟日本人志愿者日语对话练习日语.有一次练习结束 ...

  8. 【阿里云产品公测】OpenSearch初体验

    OpenSearch是一个非常有意义的功能,对于很多数据量较大的站点, SF2<   如果搜索功能自己做的话,或者用数据库里的查询语句,首先效率低下,而且占用资源. ); <Le6   另 ...

  9. vs2017源文件创建代码自动版权声明注释

    原来在vs2015下用的挺好,顺便移植到2017下. 用文本打开,在其头部加上 “C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterpr ...

  10. 【网络编程】TCP网络编程

    TCP网络程序设计 一.模型函数化 图片:TCP编程模型 1.1 创建套接字Socket #include <sys/types.h> /* See NOTES */ #include & ...