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 來回顯和獲取數據的時候,類型不一致會致使不能高亮,因此寫代碼的過程當中儘可能注意類型的判斷。文檔

相關文章
相關標籤/搜索