el-input @change无法触发问题描述与解决方案

前言

elementUI是饿了么基于vue开发的一套PC端UI组件库，github地址.
它的star数为41.8k，几乎称霸vue PC端UI，简单易用，我在公司的vue项目里也是用的这个库。但是今天发现了一个小问题，并且官方也并没有给出解决方案。下面描述一下我的 发现->试错->解决 过程。

---

发现

项目里写了一个input框，理论上使用v-model进行双向绑定就不用操心了，但是此框需要限制英文逗号的输入，所以需要进行一层校验：当用户输入英文逗号时，剔除逗号，并给出提示。
这是一个合理的需求，并且非常普遍。
开始干吧，看了官方文档，如下：

文档截图

通过添加change事件，在每次输入框值发生改变时获取数据并进行加工，change函数会接受一个value参数，即输入框改变后的值。
值得注意的是，我的change事件中需要额外传递两个参数：index和indexItem。
那么，按照常规，我在方法中获取三个参数，最后一个是输入值value1:

    stdValueChange(index, indexItem, value1) {
      console.log('index', index);
      console.log('indexItem', indexItem);
      console.log('value1', value1);
      let value = this.extraValue.names[index].value[indexItem];
      // 不允许加入英文逗号
      if (/,/.test(value)) {
        this.$message.error('规格值不允许出现英文逗号');
        value = value.replace(/,/g, '');
      }
      this.extraValue.names[index].value[indexItem] = value;
    }

问题来了：change事件不是在输入的时候触发吗？为什么我在失焦的时候才触发？而且为什么第三个参数为undefined？难道大名鼎鼎的elementUI也会有问题？

控制台

此后我试了不带参数的情况，是可以正常获取输入值的。
我的element版本号："element-ui": "^2.9.1".

试错并解决

带着以上两个问题，我查了element的github上的issue板块，这应该是最权威的地方了。确实有人提过这个问题，评论给出的建议是使用input事件以解决输入无法触发change事件的bug，并吐槽了官方文档：

来自网友的吐槽

各路网友吐槽

看来人人都用的大框架也会有显而易见的问题。
亲测后确实解决了触发问题，每次改变输入框里的值，都会触发input事件。
el-input实际是封装了原生input，而原生input的onchange事件本身就是失焦时触发，oninput是实时触发，所以el-input并没有违反原生API，只是文档写的不够明确。

el-input封装的原生input

源码中给原生input绑定onchange和oninput事件

源码中给change和input事件传递value参数

继续解决下一个问题：change事件在带参数的情况下，获取不到当前输入值。
这个问题之前没有找到更好的解决办法，我用的方法就是通过v-model进行双向绑定，再直接从data中获取实时数据，由于change触发时数据已经更新了，所以这招是肯定没问题的，只是看起来没那么高级而已。
之后又找到了更好的解决办法，不需要依赖v-model：

...
stdValueChange(index, indexItem, value) {
      console.log('index', index);
      console.log('indexItem', indexItem);
      console.log('value', value);
      // let value = this.extraValue.names[index].value[indexItem];
      // 不允许加入英文逗号
      if (/,/.test(value)) {
        this.$message.error('规格值不允许出现英文逗号');
        value = value.replace(/,/g, '');
      }
      this.extraValue.names[index].value[indexItem] = value;
}

实时触发并获取输入值

原因是传递给input事件的必须是一个function才能得到value值，而之前只是把这个函数执行一遍而已，没有获取value值的入口。

总结

从这次问题的发现到解决，总结了以下几点：

1. 大框架也会有缺陷，当发现bug时，要敢于质疑权威；
2. 发现问题时，先去该框架的github issue里找答案，如此多的人使用的框架，肯定有人遇到过和你同样的问题，并且这里的办法可信度更高；
3. 如果目前没有合适的问题解决办法，可以先寻求替代方案，以解决问题为主；
4. 时间充裕的情况下，尽量去看框架源码，查看问题根源所在，对理解框架思维、提升技术有很大帮助。

完结撒花。