input输入框的自动聚焦问题——从隐藏到显示

问题表述：今天写项目遇到一个情况，需要input输入框自动聚焦。但是此输入框在页面最初加载时是不显示的，点击编辑操作后进行显示，此input并不能自动聚焦。

1.首先写好input的ref属性

   <div v-show="status === 'edit'" class="edit-box" @click.stop="() => {}">
      <Input v-model="title_self" @on-enter="editGroupHandler" @on-blur="hideGroupInputItem" ref="groupName"/>
    </div>

 2.在监听属性中，监听控制input显隐的变量。

  watch: {
    status() {
      if (this.status === 'edit') {
      }
    },
  },

3.利用this.$ref.refName.focus()进行控制。this.$nextTick用来控制在修改数据之后立即使用这个方法，获取更新后的 DOM。

  watch: {
    status() {
      if (this.status === 'edit') {
        this.$nextTick(() => {
          this.$refs.groupName.focus();
        });
      }
    },
  },