element-ui中Switch组件以数字判断开关状态

最新推荐文章于 2024-03-29 17:00:57 发布

Yunwushenyanying

最新推荐文章于 2024-03-29 17:00:57 发布

阅读量812

点赞数 7

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/Yunwushenyanying/article/details/134983770

版权

<el-switch
    v-model="scope.row.showStatus"
    active-value="1"
    inactive-value="0"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="updateBrandState(scope.row)"
>
</el-switch>

该组件原需求为根据后端的传值（showStatus）来动态决定开关的开或关。由于数据库中的showStatus是数字0或1，而<el-switch>组件默认接收值是一个boolen类型的变量。故使用active-value和inactive-value两个属性来重设其开关的默认值。

然而在测试中发现，以上代码并没有正确的运行。排查后发现，后端传的showStatus是一个数字类型的值，而使用active-value="1"中的1会被html解释为字符串 "1"而非数字1。为解决上述问题，对代码进行改动如下：

<el-switch
    v-model="scope.row.showStatus"
    :active-value="1"
    :inactive-value="0"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="updateBrandState(scope.row)"
>
</el-switch>

在active-value和inactive-value之前加上冒号:，即v-bind动态绑定。v-bind的作用是动态地将一个属性或者一个组件的属性与一个表达式关联起来。利用这个机制，将属性"0"和"1"解释为一个表达式，而不是一个字符串。如此便实现<el-switch>组件使用后端传来的数字类型0/1状态来判断开关状态。