$nextTick
2020-04-04 本文已影响0人
未vv
在vue中修改数据不会导致DOM立即更新,因此修改数据后无法拿到最新的DOM,从而无法进行相应的DOM操作。
这时就需要$nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
如果你在数据改变之后的操作跟改变之后的DOM有关,那么就应该使用Vue.nextTick()
如点击下方的小图标切换input的type类型后,获取密码框DOM并让其聚焦
image.png下面的代码无法获取最新的DOM,所以不起作用
methods: {
toggleType () {
if (this.passwordType == 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$refs.password.focus()
}
}
修改上面的代码,将DOM操作放在$nextTick()的回调函数中,问题得到解决
this.$nextTick(() => {
this.$refs.password.focus()
})