前言:

因为项目中用到了饿了么出品的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. ul li各属性设置

    1. ul li删除前面的黑点:style=“list-style:none;” <ul style=“list-style:none;”> <li></li> & ...

  2. float、display和流

    一.css的元素有很深的道理和它存在的意义 块元素:默认元素的上下左右会有间隔(即使设置margin.padding为0也一样).如果想0间隔,考虑float. float:会使元素自动生成一个块级框 ...

  3. 使用mpvue搭建一个初始小程序

    1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安 ...

  4. Css3新增背景属性

    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...

  5. C++类继承--构造函数时先构造基类

    以下说明继承类函数构造时,先构造基类: 析构基类时,若没加上virtual,只析构基类,不析构派生类: 析构派生类时,同时会析构基类: 1. 基类析构函数有virtual #include <s ...

  6. java Date中方法toLocaleString过时的替代方案

    DateFormat ddf = DateFormat.getDateInstance(); DateFormat dtf = DateFormat.getTimeInstance(); DateFo ...

  7. Error: A JNI error has occurred, please check your installation and try again

    自己写的maven项目打包以后的一个email测试类jar,放到linux上运行时报错: Error: A JNI error has occurred, please check your inst ...

  8. 使用with子句优化代码中重复查询

    /*好处: 1. 性能更好,一份复制(类似SYS_TMP...),多份使用.       2. 结构清晰,预先定义.       3. 代码修改不必修改多处.       请注意观察语句1和语句2执行 ...

  9. Oracle 12c logminer测试

    首先开启归档:SQL> archive log list   Database log mode              Archive ModeAutomatic archival     ...

  10. July 23rd 2017 Week 30th Sunday

    Setting goals is the first step in turning the invisible into the visible. 设定目标是将实现梦想的第一步. If you wa ...