在做vue的项目时,用的是Element的框架,发现el-switch组件有个问题,原本以为是框架的bug,最后发现是vue的使用问题。
【问题】
参考: https://github.com/ElemeFE/element/issues/11698
概述:不管el-switch的active-value属性为active-value="100"或active-value=100,v-model传如的变量为'100'(string)时,按钮皆为开启;v-model传如的变量为100(number)时,按钮皆为关闭。
猜测可能是el-switch组件对v-model的判断有误,只接收string。故给Element团队提了这个问题,希望无论v-model为'100'或100时,按钮都能为开启。
后得到的回复是这个地方是让开发者自己灵活使用的(之前也有人提过issue)。
【总结】
当active-value="100"或active-value=100时,表示v-model须为'100'(string);
当 :active-value="'100'"时,表示v-model须为'100'(string);
当 :active-value="100"或 :active-value=100时,表示v-model须为100(number);
即,根据active-value属性的值的类型判断,当v-bind时,则按照bind的值的来;当只是标签的属性时,默认为string。
<!-- <el-switch
v-model="dataForm.statusBool"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch> -->
<el-tooltip :content="'Switch value: ' + dataForm.status" placement="top">
<el-switch
v-model="dataForm.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</el-tooltip>