uniapp或者微信小程序 对输入框进行拦截不重新渲染(只输入数字拦截成功但是页面不渲染更新)问题解决-爱代码爱编程
效果
问题
@input 事件进行拦截 打印 e.target.value的值变化了,但是页面不重新渲染。
如下例子:
输入 11 e.target.value的值是11
输入11a 正则进行拦截更改 e.target.value的值还是是11
输入11ab 正则进行拦截更改 e.target.value的值还是是11
输入11ab3 正则进行拦截更改 e.target.value的值更改了113
就是因为拦截后的值没变导致页面不重新渲染
解决
<input
class="input"
type="text"
placeholder="请输入价格"
:value="pItem.price"
@input="handleOnlyNumbersInput($event, pItem, 'price')"
/>
//data中的属性
nowNum: 0
//methods中的handleOnlyNumbersInput函数
methods:{
// 现在只输入 数字
handleOnlyNumbersInput(e, item, key) {
let input = e.target.value;
const regex = /^[0-9.]*$/; //数字包括小数点
if (!regex.test(input)) {
// e.target.value = input.replace(/[^\d.]/g, '');
input = input.replace(/[^\d.]/g, '');
this.nowNum++;
//来回切换更改 input 值 是为了 使得input内容变化从而使页面渲染
if (this.nowNum % 2 == 0) {
this.$set(item, key, input + ' ');
} else {
this.$set(item, key, ' ' + input);
}
if (this.nowNum >= 100000) {
this.nowNum = 0;
}
}
this.$nextTick(() => {
this.$set(item, key, input);
// this.$forceUpdate();
});
},
}