前言:

因为项目中用到了饿了么出品的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. VC 在调用main函数之前的操作

    title: VC 在调用main函数之前的操作 tags: [VC++, 反汇编, C++实现原理] date: 2018-09-16 10:36:23 categories: VC++反汇编分析 ...

  2. Grunt插件uglify

    Gruntfile.js里面配置: module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJ ...

  3. Angular-ui/bootstarp modal 主控制器与模态框控制器传值

    调用模态框: $scope.open = function (size) { //这里很关键,是打开模态框的过程 var modalInstance = $uibModal.open({ animat ...

  4. Python基础-进程和线程

    一.进程和线程的概念 首先,引出“多任务”的概念:多任务处理是指用户可以在同一时间内运行多个应用程序,每个应用程序被称作一个任务.Linux.windows就是支持多任务的操作系统,比起单任务系统它的 ...

  5. Windows API 编程-----Windows NT 环境下禁止任务切换

    函数原型: BOOL WINAPI SystemParametersInfo( _In_ UINT uiAction, _In_ UINT uiParam, _Inout_ PVOID pvParam ...

  6. ArcGIS软件操作——地图配准

    初次写博文,出现措词不当.表述不明确等之类的问题,敬请见谅,但会努力做好.同时,也欢迎各位提出意见,共同交流,共同进步! 直奔主题——运用ArcGIS软件对地图进行配准! 1 数据准备:网络下载的中国 ...

  7. 【Python】猜数小游戏(文件操作)

    人生苦短,我用Python 关键词 1.多用户 2.字典记录所有成绩 3.每次游戏轮数&总游戏次数&平均每次游戏需要多少轮 字典Dictionary.列表List.元组Tuple差异化 ...

  8. Raspberry U盘操作

    项目系统要求的对U盘分区,分出系统盘与用户盘.这就有了今天的这个总结了: 1.输入命令“fdisk -l”查看设备挂载的位置,因为这个在设备挂载的时候有可能会发生变化. 假设设备挂载到了 /dev/s ...

  9. js if语句只写一个参数是什么意思?

    如 var a=0:if(!a){...}; avascript中以下值会被转换为false false undefined null 0 -0 NaN ""

  10. 阿里云安装jdk报错gzip: stdin: unexpected end of file

    在阿里云上面安装jdk时候报了这个问题,如下图所示 然后看了下jdk应该是有150多M的,但是阿里云上面的只有1M多,删除 重新下载... tar zxvf jdk 好了