Vue uni-app修改data内的数据页面上未刷新的解决方法

问题产生的原因1:Vue监听不到变量的属性修改,当修改变量的属性时,双向绑定不会重新渲染一遍;(这个产生原因我不太确定,我页面数据很多时修改变量的属性没有重新渲染,数据少的时候又渲染了,不知道是不是其它原因导致的)

 

问题产生的原因2:Vue会在当前方法执行完毕以后再去渲染页面,如果在数据操作完毕时某变量的数据未发生改变,Vue不会重新渲染该数据;

例:我需要在输入数据时使用正则去判断该数据是否为正数,如果不是数字就清空输入框的值.

<input type='text' @input='bindnumvalue' :value='number1'/>

bindnumvalue(e) {
                let reg = new RegExp(/^(0|[1-9]\d*).?[0-9]*$/);
                    if (!reg.test(e.detail.value)) {
                        this.number1 = ' ';
                    }
            }

假定第一次输入时,输入了字符'a',此时vue进行判定,数据不正确,将number1设置为' ',输入框被清空;

在第二次输入时,继续输入字符'a',此时vue进行判定,数据不正确,将number1设置为' ',由于这里将number1的值从' '设置为了' ';

vue判定数据没有修改,页面上面不会渲染,输入框内的字符'a'将不会被清空;

解决方法:使用v-if与this.$nextTick()告诉vue我要重新渲染页面

<input type='text' @input='bindnumvalue' :value='number1' v-if='!ischange'/>

bindnumvalue(e) {
                let reg = new RegExp(/^(0|[1-9]\d*).?[0-9]*$/);
                    if (!reg.test(e.detail.value)) {
                        this.number1 = ' ';
                    }

                this.ischange=true;
                this.$nextTick(()=>{ 
                    this.ischange=false;
                })
            }

v-if在每次判定时会重新渲染区域数据,this.$nextTick的效果是在该节点执行完毕以后再执行nextTick内的代码;