【iview 避坑记录】iview的switch组件使用字符串控制开关

最近在开发后台管理系统,用到了好多 switch 开关,但是遇到了一个问题困扰了我三天,最后才发现是我大意了,再次记录一下希望可以帮小伙伴们成功避坑。

情景再现:
系统中有一个状态开关控制这个应用是否可以开启,iview 的 switch 组件有现成的功能。我很快根据 iview 的文档,创建了开关。
在这里插入图片描述
但是实现功能时才发现,后台给我的数据是 字符串形式,而 iview 的组件用的是 布尔值。我用尽了九牛二虎之力,去转化数据格式,但总是提示我格式不正确。每天我抽出一小时来研究它,我以为我换个脑子问题可能会迎刃而解,事实证明我太乐观了,三天过去了我依然卡在这,我已经被它成功搞崩溃了。

解决方案:
迫于无奈,我准备重新仔细熟读一下 iview 文档寻找解决方案。终于时间不负有心人,被我发现了解决方法,竟是如此简单。

官方API如下:
在这里插入图片描述
于是史上最简单的解决方案来了。

 <i-switch
   true-value="Y"
   false-value="N"
   :before-change="handleBeforeChange"
   @on-change="statusChange(item.appStatus, item)  "
   class="switch"
   v-model="item.appStatus"
 </i-switch>
 >

还有一点比较坑人的也需要注意一下啊:
按照官方文档的使用方法,你会发现想象中的 开关 并不会如期出现。
官方代码如下

<template>
    <Switch v-model="switch1" @on-change="change" />
</template>

正确的写法应该如下:

<template>
    <i-switch v-model="switch1" @on-change="change" /></i-switch>
</template>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码搬运媛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值