前言

elementUI是餓了么基于vue開(kāi)發(fā)的一套PC端UI組件庫(kù)秦叛，github地址.
它的star數(shù)為41.8k轰豆，幾乎稱霸vue PC端UI迷殿，簡(jiǎn)單易用乱顾，我在公司的vue項(xiàng)目里也是用的這個(gè)庫(kù)盟戏。但是今天發(fā)現(xiàn)了一個(gè)小問(wèn)題绪妹，并且官方也并沒(méi)有給出解決方案。下面描述一下我的 發(fā)現(xiàn)->試錯(cuò)->解決 過(guò)程柿究。

發(fā)現(xiàn)

                  <el-input
                    v-model="extraValue.names[index].value[indexItem]"
                    placeholder="請(qǐng)輸入"
                    @change="stdValueChange(index, indexItem)"
                    class="stdValue-subItem-input">
                  </el-input>

項(xiàng)目里寫(xiě)了一個(gè)input框邮旷，理論上使用v-model進(jìn)行雙向綁定就不用操心了，但是此框需要限制英文逗號(hào)的輸入蝇摸，所以需要進(jìn)行一層校驗(yàn)：當(dāng)用戶輸入英文逗號(hào)時(shí)婶肩，剔除逗號(hào)办陷，并給出提示。
這是一個(gè)合理的需求律歼，并且非常普遍民镜。
開(kāi)始干吧，看了官方文檔险毁，如下：

文檔截圖

    stdValueChange(index, indexItem, value1) {
      console.log('index', index);
      console.log('indexItem', indexItem);
      console.log('value1', value1);
      let value = this.extraValue.names[index].value[indexItem];
      // 不允許加入英文逗號(hào)
      if (/,/.test(value)) {
        this.$message.error('規(guī)格值不允許出現(xiàn)英文逗號(hào)');
        value = value.replace(/,/g, '');
      }
      this.extraValue.names[index].value[indexItem] = value;
    }

問(wèn)題來(lái)了：change事件不是在輸入的時(shí)候觸發(fā)嗎嵌戈？為什么我在失焦的時(shí)候才觸發(fā)？而且為什么第三個(gè)參數(shù)為undefined听皿？難道大名鼎鼎的elementUI也會(huì)有問(wèn)題熟呛？

控制臺(tái)

試錯(cuò)并解決

帶著以上兩個(gè)問(wèn)題庵朝，我查了element的github上的issue板塊，這應(yīng)該是最權(quán)威的地方了又厉。確實(shí)有人提過(guò)這個(gè)問(wèn)題九府，評(píng)論給出的建議是使用input事件以解決輸入無(wú)法觸發(fā)change事件的bug，并吐槽了官方文檔：

來(lái)自網(wǎng)友的吐槽

各路網(wǎng)友吐槽

看來(lái)人人都用的大框架也會(huì)有顯而易見(jiàn)的問(wèn)題覆致。
親測(cè)后確實(shí)解決了觸發(fā)問(wèn)題侄旬，每次改變輸入框里的值，都會(huì)觸發(fā)input事件煌妈。
el-input實(shí)際是封裝了原生input儡羔，而原生input的onchange事件本身就是失焦時(shí)觸發(fā)，oninput是實(shí)時(shí)觸發(fā)璧诵，所以el-input并沒(méi)有違反原生API汰蜘，只是文檔寫(xiě)的不夠明確。

el-input封裝的原生input

源碼中給原生input綁定onchange和oninput事件

源碼中給change和input事件傳遞value參數(shù)

繼續(xù)解決下一個(gè)問(wèn)題：change事件在帶參數(shù)的情況下腮猖，獲取不到當(dāng)前輸入值鉴扫。
這個(gè)問(wèn)題之前沒(méi)有找到更好的解決辦法赞枕，我用的方法就是通過(guò)v-model進(jìn)行雙向綁定澈缺，再直接從data中獲取實(shí)時(shí)數(shù)據(jù)坪创，由于change觸發(fā)時(shí)數(shù)據(jù)已經(jīng)更新了，所以這招是肯定沒(méi)問(wèn)題的姐赡，只是看起來(lái)沒(méi)那么高級(jí)而已莱预。
之后又找到了更好的解決辦法，不需要依賴v-model：

<el-input
    v-model="extraValue.names[index].value[indexItem]"
    placeholder="請(qǐng)輸入"
    @input="e => stdValueChange(index, indexItem, e)"
    class="stdValue-subItem-input">
</el-input>
...
stdValueChange(index, indexItem, value) {
      console.log('index', index);
      console.log('indexItem', indexItem);
      console.log('value', value);
      // let value = this.extraValue.names[index].value[indexItem];
      // 不允許加入英文逗號(hào)
      if (/,/.test(value)) {
        this.$message.error('規(guī)格值不允許出現(xiàn)英文逗號(hào)');
        value = value.replace(/,/g, '');
      }
      this.extraValue.names[index].value[indexItem] = value;
}

實(shí)時(shí)觸發(fā)并獲取輸入值

原因是傳遞給input事件的必須是一個(gè)function才能得到value值项滑，而之前只是把這個(gè)函數(shù)執(zhí)行一遍而已依沮，沒(méi)有獲取value值的入口。

總結(jié)

從這次問(wèn)題的發(fā)現(xiàn)到解決枪狂，總結(jié)了以下幾點(diǎn)：

1. 大框架也會(huì)有缺陷危喉，當(dāng)發(fā)現(xiàn)bug時(shí)，要敢于質(zhì)疑權(quán)威州疾；
2. 發(fā)現(xiàn)問(wèn)題時(shí)辜限，先去該框架的github issue里找答案，如此多的人使用的框架严蓖，肯定有人遇到過(guò)和你同樣的問(wèn)題薄嫡，并且這里的辦法可信度更高；
3. 如果目前沒(méi)有合適的問(wèn)題解決辦法颗胡，可以先尋求替代方案毫深，以解決問(wèn)題為主；
4. 時(shí)間充裕的情況下毒姨，盡量去看框架源碼哑蔫，查看問(wèn)題根源所在，對(duì)理解框架思維弧呐、提升技術(shù)有很大幫助鸳址。

完結(jié)撒花。