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)
			},
相关推荐
kyriewen23 分钟前
我筛了 1400 个 Claude Code Skills,留下 5 个天天在用的
前端·ai编程·claude
JNX_SEMI38 分钟前
AT2401C 2.4GHz 全集成射频前端单芯片技术解析
前端·单片机·嵌入式硬件·物联网·硬件工程
anOnion1 小时前
Agentic 前端开发之 实时显示 AI Agent 终端输出
前端·javascript·人工智能
随风一样自由1 小时前
【前端领域】2026最新前端领域全梳理(框架/工具/AI/跨端/底层标准/就业趋势)
前端·人工智能·前端框架
这是个栗子1 小时前
【前端性能优化】优化数据加载:用 Promise.all 从串行到并行
前端·javascript·性能优化·异步编程·前端优化·promise.all
fei_sun2 小时前
黑洞路由(Null Route/空接口路由)
服务器·前端·javascript
大爱一家盟2 小时前
告别卡点BGM同质化 2026原创卡点音乐素材下载网站 TOP5 推荐
大数据·前端·人工智能
彦为君2 小时前
算法思维与经典智力题
java·前端·redis·算法
aa小小3 小时前
localhost 访问异常排查笔记
前端
格子软件3 小时前
2026年GEO优化系统源码的分布式状态机深度拆解
java·前端·vue.js·vue·geo