element ui的el-input-number修改数值失效怎么解决
这篇文章主要介绍了element ui的el-input-number修改数值失效怎么解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇element ui的el-input-number修改数值失效怎么解决文章都会有所收获，下面我们一起来看看吧。
element ui的el-input-number修改数值失效
问题代码
目的：实现去掉小数位。
<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
let re = /^[0-9]+$/
if (!re.test(this.cycle)) {
this.$message.error('请输入1~3600之间的正整数！')
this.cycle = parseInt(this.cycle)
}
}
当在输入框输入12.3时，光标移开触发change事件，输入框的值会变成12；
再次反复操作，输入12.3，光标移开触发change事件，输入框的值仍然是12.3；
总之输入框能不能祛除小数位不可控。
解决办法
只需使用$nextTick函数，改为如下即可：
<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
let re = /^[0-9]+$/
if (!re.test(this.cycle)) {
this.$message.error('请输入1~3600之间的正整数！')
this.$nextTick(() => {
this.cycle = parseInt(this.cycle)
})
}
}
分析说明
el-input-number是element的一个组件，并非简单的标签，而change事件监听的是整个组件。
也就是说，光标移开触发change事件，此时cycle值为12.3，马上触发dom更新。
此时修改了cycle的值，祛除了小数位。（当前组件已经被监测到变化，已经触发了重新渲染dom，此时再修改并不会再次渲染dom。）
导致dom更新在前，cycle的值取整操作在后，并且此后无刷新控制dom重新渲染的指令。
所以dom上挂载显示的值仍然是12.3，但是console.log(this.cycle)的值为12。
此时需要用到$nextTick函数，即在dom初次完成渲染挂载后，修改其值再次触发dom渲染挂载。
官方资料
异步更新队列：
可能你还没有注意到，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数值精度”去控制了。
<el-input-number size="mini" class="just-full-width" v-model="cycle" :min="1" :max="3600" :precision="0"></el-input-number>
但是有个弊端，就没有填错的提示了…
el-input-number组件无法修改默认值为空
<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
当num设置为 null 或者 "" 都不能将输入框的值变为空
后来发现 将num 设置为 undefined
关于“element ui的el-input-number修改数值失效怎么解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“element ui的el-input-number修改数值失效怎么解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论