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)
			},
相关推荐
郭老二2 小时前
【前端】vue3:编译步骤
前端
不在逃避q3 小时前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁3 小时前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9853 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易3 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师4 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174465 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈5 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen6 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒6 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端