Vue.js 我把ref放在我的输入中，但我可以'；我不能专注于它，为什么？

我想做一个基本的todo应用程序。输入和标签位于彼此的顶部。在我的状态中有一个变量“editMode”，默认为false。 如果“editMode”为真，我的标签将消失，输入将出现。我把 @DBL单击我的标签。当调用的“editMode”将变为真时，我想集中输入字段

我把ref放在输入元素上。所以用户双击标签，我想用“this.$refs.input.focus（）”来聚焦我的输入。我也尝试了这个。$nextTick

这是我的模板

  <div class="todo">
    <div class="todo-left">
      <input type="checkbox" class="completed"/>
    </div>
    <div class="todo-middle">
      <label v-if="!editMode" @dblclick="activateEditMode">{{text}}</label>
      <input type="text" v-model="text" v-show="editMode" ref="input">
    </div>
    <div class="todo-right" v-if="!editMode">
      <span>❌</span>
    </div>
  </div>
</template>

{{text}}
❌

这是剧本

<script>
export default {
    name:'TodoItem',
    data:function(){
      return {
        editMode:false,
        text:'Go to shopping'
      }
    },
    methods:{
      activateEditMode:function(){
        this.editMode=true;
        this.$nextTick(()=>{
          this.$refs.input.focus()
        })

      },
      onClickOutside:function(e){
        const { input} =this.$refs
        if(input && !input.contains(e.target)){
          this.editMode=false
        }

      }
    },
    mounted() {
        document.addEventListener("click", this.onClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener("click", this.onClickOutside);
    }

}
</script>

导出默认值{
名称：'TodoItem'，
数据：函数（）{
返回{
编辑模式：false，
文字：“去购物”
}
},
方法：{
activateEditMode:function（）{
this.editMode=true；
这个.$nextTick（（）=>{
这是。$refs.input.focus（）
})
},
onClickOutside:函数（e）{
常量{input}=this.$refs
if（input&！input.contains（e.target））{
this.editMode=false
}
}
},
安装的（）{
document.addEventListener（“单击”，this.onClickOutside）；
},
在…之前{
document.removeEventListener（“单击”，this.onClickOutside）；
}
}

它很好用——是的，很好用。我已经找了三个小时的解决办法了。我唯一没有尝试的就是重新启动应用程序。