elementUI组件InputNumber 计数器输入限制

转载

数据探索者 2024-09-24 07:02:15

文章标签 elementui vue.js 前端 Vue 钩子函数 文章分类 机器学习人工智能

问题背景：

有个输入框，默认值为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()的回调函数中。