最近在开发后台管理系统,用到了好多 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>