Element系列之el-input-number无法实时监听数据变化的解决方法
文章の目录
- 1、步骤一：将@change替换成@input.native
- 2、步骤二：用eventDisposalRangeChange方法去获取输入框的实时的值，并重新赋值给绑定的对象。
- 参考
- 写在最后
一般来说el-input-number的@change事件只会在blur的时候触发，那如何实时监听输入数字的变化呢？
1、步骤一：将@change替换成@input.native
<el-form-item label="活动名称" prop="num" :required="true"><el-input-numberref="refNumber"v-model="ruleForm.num"controls-position="right"@change="handleChange":min="1":max="10"@input.native="eventDisposalRangeChange()">el-input-number>
el-form-item>
2、步骤二：用eventDisposalRangeChange方法去获取输入框的实时的值，并重新赋值给绑定的对象。
eventDisposalRangeChange(value) {const key = this.$refs.refNumber.displayValue;this.ruleForm.num = key;if (value != undefined) {this.$refs.ruleForm.clearValidate("num");}}
这里用的$ref来获取实时的值，这样就可以实时监听el-input-number输入框的实时值。
参考
- el-input-number无法实时监听输入事件？我的解决办法
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！