问题复现
vue中使用el-input-number组件时,使用@input事件获取输入值的变动,并以此来作为表格组件的数据筛选条件
比如此时输入框的值为12,在后面输入0,变为120,但是通过@input调用的函数中,获取组件绑定的值,显示为12,再将120修改为12,结果打印输出120,总是比输入慢一步
解决方式
在@input函数中延迟20ms即可获取到实际输入值
问题分析
el-input组件没有这个问题,而el-input-number存在,说明应该是与输入内容变动之后的组件内部校验有关,数字输入框在输入其他字符时会直接丢弃掉。推测应该是触发@input在前,组件内校验在后,校验未完成导致绑定值没有更新,所以在@input函数中加一个延迟等待完成校验之后再读取绑定值即可获取到最新的输入内容