界面代码:
<input @input="inputArea" :data-max="cropProduct.maxArea" name="area" type="number" :value="cropProduct.area" placeholder="请输入定植面积"></input>
@input事件代码:
inputArea(e){
var area = Number.parseFloat(e.target.value);
var maxArea = Number.parseFloat(this.cropProduct.maxArea);
console.log(area,maxArea)
console.log(area>maxArea)
this.cropProduct.area='';
if(area>maxArea){
this.cropProduct.area=maxArea;
}else{
this.cropProduct.area = e.target.value
}
console.log(this.cropProduct.area)
}

- 发布:2021-09-25 09:34
- 更新:2021-10-14 22:39
- 阅读:659
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
第三方开发者工具版本号: 1.05.2109101
基础库版本号: 2.19.5
项目创建方式: CLI
CLI版本号: 3.2.8.20210923-alpha
示例代码:
操作步骤:
1、输入数字超过max设定最大值,value会变更为max最大值
2、继续输入超过max数字,input执行代码正确执行,但界面中的value不刷新。
1、输入数字超过max设定最大值,value会变更为max最大值
2、继续输入超过max数字,input执行代码正确执行,但界面中的value不刷新。
预期结果:
输入的数字大于设定最大值时,value设定为max的值。
输入的数字大于设定最大值时,value设定为max的值。
实际结果:
第一次value刷新,继续录入不刷新
第一次value刷新,继续录入不刷新
bug描述:
需求是这样的:input事件监听值改变时,如果输入值大于限定最大值要更新为最大值。
问题:第一次执行是正确的,输入值超过最大设定值value会变更为最大值,但如果继续录入数字超过设定最大值时,界面上的value不再刷新,而cropProduct.area是正确变更了的。

_孙大圣_ - 只想用nvue
这个问题一直是这样- -。nvue也是这样,,不能及时更新,不过可以绕开,你可以试试下面这个代码
input(e){
if(e.detail.value > 10){
this.tiNumber = 2;
setTimeout(()=>{
this.tiNumber = 10;
},1);
}
}
5***@qq.com (作者)
谢谢,用延时的确可以变相的解决这个问题。
2022-07-03 10:41