vue中异步更新$nextTick

1.需求

编辑标题, 编辑框自动聚焦

  1. 点击编辑,显示编辑框
  2. 让编辑框,立刻获取焦点
    vue中异步更新$nextTick_第1张图片

2.代码实现



 

3.问题

“显示之后”,立刻获取焦点是不能成功的!

原因:Vue 是异步更新DOM (提升性能),在editFn方法中对dom的操作并不会每执行一行就立刻重新渲染一次,所以在执行第二句代码的时候第一句代码还没有执行到。

4.解决方案

$nextTick:等 DOM更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

this.$nextTick(() => {
  this.$refs.inp.focus()
})

注意:$nextTick 内的函数体 一定是箭头函数,这样才能让函数内部的this指向Vue实例

你可能感兴趣的:(前端,vue.js,javascript,前端)