目前我所做的项目中用到了vue的一个组件库----ant-design,是目前比较流行了三大组件库之一
在应用到其中的<a-checkBox>
标签时发现了其中的一个bug
代码如下:
<a-checkbox :checked="isChecked" @change="onChange"></a-checkbox>
拥有一定js基础的程序员都知道,在原生的js中,多选框的书写方式如下
<input type="checkbox" :id="box" @change="onChange($event)"/>
我们可以通过如下方式来更改多选框的勾选状态
let el = document.getElementById(id)
el.checked = false
其中checked表示多选框的勾选状态以及触发的 勾选/取消勾 选这个动作
但在ant-design组件库中我发现,当我将isChecked的状态置为false时,多选框的转态确实没有被勾选上,但是勾选的动作确实已经提交了,下次点击时触发的仍然是取消勾选,这与展示给用户的勾选状态明显不一致。
为了证实这一想法,我进行了如下操作。
搭建一个vue-cli项目模板,使用npm安装ant-design组件。
更改三个文件
main.js如下
import Vue from 'vue'
import App from './App'
import route