element radio 点击失效

今天工做的时候遇到了一个怪事,耗费了一些时间 debugger,特地记下来,警醒本身和提醒别人。vue

情景回忆: 在两个 radio 均没有选中的状况下,第一个 radio 不管怎么点击都没法高亮,只有点击了第二个 radio 后再点击,才能够高亮。debug

通过一段时间排查,最后获得如下缘由:接口

  1. label 值能够为string / number / boolean,但是代码是直接抄文档的,没有根据实际需求修改
  2. label 值 Number 跟接口返回值 String 不同,致使回显数据时 radio 选中第一个,可是没有高亮,因此不管怎么操做,第一个 radio 不会变
  3. 点击第二个时,把返回值改成 Number,点第一个 radio 则会高亮

虽然 radio 是一个很简单的功能,可是在 vue 使用 v-model 来回显和获取数据的时候,类型不一致会致使不能高亮,因此写代码的过程当中尽可能注意类型的判断。文档

相关文章
相关标签/搜索