在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)
},