uni-app NumberBox 数字输入框插件uni-number-box加减输入无效

在uni-app的购物车功能中遇到NumberBox输入框响应失效的问题,原因是watch方法中事件触发顺序错误及值类型转换不当。通过调整事件触发顺序,确保先更新值再触发事件,并将值转换为数值类型,成功解决了输入框无法更改数值的故障。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述:

在写uni-app项目的购物车时,使用NumberBox 数字输入框该插件发现点击加减输入框并没有反应。

原因分析:

后面发现插件文件的watch:方法

watch: {
			value(val) {
				this.inputValue = +val;
			},
			inputValue(newVal, oldVal) {
				if (+newVal !== +oldVal) {
					this.$emit(change, newVal);
                    this.$emit(input, newVal);
				}
			}
		}
this.$emit(change, newVal);
this.$emit(input, newVal);

这两条代码写反了,所以导致先调用改变事件,然后才改变值,导致数字输入框改变不了值。
并且返回的值为字符串,无法改变输入框。

解决方案:

改变顺序,先改变值,再改变事件,
并且在val值前添加+号使返回的val值变成数值。

this.$emit(input, +newVal);
this.$emit(change, +newVal);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值