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

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

$set也试过 没有用

javascript 复制代码
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)
			},
相关推荐
小希爸爸3 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师19 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭20 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码27 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger32 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话33 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时33 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳33 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子36 分钟前
深入解析 iframe
前端
WEI_Gaot36 分钟前
ES6 模板字符串
前端·javascript