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 ...
随机推荐
- vue2.0中v-on绑定自定义事件的理解
vue中父组件通过prop传递数据给子组件,而想要将子组件的数据传递给父组件,则可以通过自定义事件的绑定. 每个Vue实例都实现了[事件接口],即: 1.使用 $on(eventName) 监听事件 ...
- Android解析ActivityManagerService(二)ActivityTask和Activity栈管理
前言 关于AMS,原计划是只写一篇文章来介绍,但是AMS功能繁多,一篇文章的篇幅远远不够.这一篇我们接着来学习与AMS相关的ActivityTask和Activity栈管理. 1.ActivitySt ...
- Jmeter CSV 参数化/检查点/断言
当参数的值没有规律且量不太大时,可以使用CSV Data set config这种方法. 案例: 应用Sogou自动搜索关键字: 软件开发测试,web功能自动化测试,性能自动化测试,Selenium以 ...
- 微软牛津计划——声纹识别与视频识别API上线啦!
上个月,我们发布了牛津计划机器学习的情感识别API,能够帮助不同平台的开发者轻松添加智能应用,而无需精通人工智能领域.牛津计划仅仅是微软在人工智能领域探索中的一个实例,而我们的期望是实现更加注重个人使 ...
- SQL Server ->> 数据一致性检查命令 -- DBCC CHECKDB
Comming soon!!! 参考文献: CHECKDB From Every Angle: Complete description of all CHECKDB stages
- leetcode Ch1-search 2014
1. Search Insert Position class Solution { public: int searchInsert(int A[], int n, int target) { ,r ...
- SVNKit学习——使用低级别的API(ISVNEditor接口)直接操作Repository的目录和文件(五)
本文是参考官方文档的实现,官方wiki:https://wiki.svnkit.com/Committing_To_A_Repository 本文核心使用的是ISVNEditor这个接口直接对Re ...
- JS如何将变量作为一个对象的Key
var lastWord = 'last word'; var a = { 'first word': 'hello', [lastWord]: 'world' }; a['first word'] ...
- [EffectiveC++]item39:明智而审慎地使用private
187页 private继承意味implementedin-terms-of(根据某物实现出).如果你让class D以private形式继承class B,你的用意为了采用class B内已经备妥的 ...
- Codeforces Round #436 (Div. 2)【A、B、C、D、E】
Codeforces Round #436 (Div. 2) 敲出一身冷汗...感觉自己宛如智障:( codeforces 864 A. Fair Game[水] 题意:已知n为偶数,有n张卡片,每张 ...