uniapp 的input组件在@input事件中限制用户可输入数值的范围，出现视图不更新的bug。-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 的input组件在@input事件中限制用户可输入数值的范围，出现视图不更新的bug。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在input事件拿到用户输入的值，然后给input组件绑定的值赋值之前，判断用户输入的不能超过最大值，超过的话默认为100，，这个判断和赋值然后视图更新只能触发一次，之后在输入，发现值改了页面但是不更新。我擦了，v-model和：value都试过。都没用，网上描述的这个bug能追溯到19年。看来是个老bug。解决办法就是将赋值代码写在延时器中：

$set也试过没有用文章来源地址https://www.toymoban.com/news/detail-602385.html

inputfomatter(val) {//input事件函数
				console.log("input事件");
				this.questList[this.questIndex].options[0].value = Number(val.target.value)
				if (val.detail.value.length > 0) { //清除按钮显隐
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
				if (Number(val.target.value) < this.questList[this.questIndex].rulerMinValue) { //如果用户输入的值小于最小值,则赋值为最小值
					setTimeout(() => { this.questList[this.questIndex].options[0].value = this.questList[this.questIndex].rulerMinValue }, 0) //不这么写，输入的超过最大值只能重置一次，之后，虽重置了值，但是页面不更新
					// this.questList[this.questIndex].options[0].value = this.questList[this.questIndex].rulerMinValue
				}
				if (Number(val.target.value) > this.questList[this.questIndex].rulerMaxValue) { //如果用户输入的值大于最大值,则赋值为最大值
					setTimeout(() => { this.questList[this.questIndex].options[0].value = this.questList[this.questIndex].rulerMaxValue }, 0)
					// this.questList[this.questIndex].options[0].value = this.questList[this.questIndex].rulerMaxValue
					// this.$set(this.questList[this.questIndex].options[0], 'value', this.questList[this.questIndex].rulerMaxValue)
				}
				setTimeout(() => { this.questList[this.questIndex].options[0].value = this.$toFixed(Number(this.questList[this.questIndex].options[0].value), 2) }, 0)
			},

到了这里，关于uniapp 的input组件在@input事件中限制用户可输入数值的范围，出现视图不更新的bug。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！