VUE2.0 elementUI el-input-number 数据更新,视图不更新

本文探讨了一个关于Vue组件中,如何修复输入框清空后默认值不正确的问题,重点介绍了使用$nextTick()解决异步更新队列延迟更新的方法,以及Element UI 2.13.2版本的精度设置优化。

问题背景:

有个输入框,默认值为10,最小值为1,想在用户输入之后加个判断,如果是删除(清空)状态就恢复默认值。代码如下:

<el-input-number v-model="num" :min="1" label="数量" @change="changeVal()">

changeVal(){
        if(this.num === undefined){
               this.num = 10;
        }
}

发现在,只执行删除操作,第一次之后能恢复到默认值,但是多操作几次之后就废了,只能用户重新输入之后视图才会更新 ,根据网上资料:

this.$forceUpdate();
this.$set();

都不好使.....

最终解决方案: 

this.$nextTick();

官方资料:

异步更新队列:

可能你还没有注意到,Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。

如果同一个 watcher 被多次触发,只会被推入到队列中一次。

这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

需要用的$nextTick()的情况:

1、你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

2、在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

最新说明:

目前element更新到2.13.2版本可以通过“precision数值精度”去控制了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值