我有一个输入元素,通过v-model绑定到一个项目值,我想限制用户输入只能输入0到10之间的数字值,我之前尝试过这个(add @input并检查输入值以保持在范围内)
我的代码如下:
<v-text-field @input="checkItem" v-model="item"></v-text-field>
checkItem(val) {
if(parseInt(val) < 1) {
this.item = 1;
} else if(parseInt(val) >10) {
this.item = 10;
}
}
问题
第一次我们输入了超出范围的数字后,该函数能够正常运行并将其保持在范围内,但当我们再次输入超出范围的数字时,元素没有更新,因为新的项目值与旧的项目值相同!为了解决这个问题,我试图使用forceUpdate和$forceUpdate()
无效!!!
例如
- 如果用户在输入框中输入范围内的任何内容,因为它在范围内,一切都正常;
- 但是,如果用户输入0或任何超出范围的数字,在第一次项值改变为1时,如果值小于1,则如果再次键入任何负值,由于上次设置为1的项目值已经更改,因此在视图中不会发生任何变化,元素值也未被更新。