Vue中this.$ref获取不到DOM对象的问题解决

一、问题描述

1.描述

今天在做这个功能的时候（双击某个div标签，出现input编辑框并且让input框获取焦点）发现使用this.$ref始终获取不到DOM对象，导致调用focus()方法一直不成功。

2.模板代码

#模板代码
<div @dblclick="showEdit">双击点我</div>
#使用ant design vue 中的a-input组件
<a-input v-if="isShowInput" ref="input"></a-input>

3.方法代码

#方法代码
//显示编辑流程分类的操作面板
showEdit() {
      this.isShowInput = true;
      this.$refs.input.focus();
}

二、解决方案

1.方法代码调整

showEdit() {
      this.isShowInput = true;
      ##改成使用 this.$nextTick执行
      this.$nextTick(() => {
         this.$refs.input.focus();
      });
}

2.原因

我猜测应该是由于input使用了v-if，在动态设置显示之后，DOM还没来得及渲染出来，就使用this.$ref来获取DOM，可能获取不到，使用this.$nextTick相当于进行了延时，等到了DOM完全渲染成功之后就能获取到了。

三、效果