[JavaScript知识库]Element系列之el-input-number无法实时监听数据变化的解决方法

一般来说el-input-number的@change事件只会在blur的时候触发，那如何实时监听输入数字的变化呢？

1、步骤一：将@change替换成@input.native

<el-form-item label="活动名称" prop="num" :required="true">
	<el-input-number
		ref="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输入框的实时值。

参考文献

1. el-input-number无法实时监听输入事件？我的解决办法

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系