javascript - Vue聚焦输入找不到输入字段

我试图将焦点放在输入字段上，但出现此错误:

这是我的代码

<span
  v-show="!employeeNumberEdit"
  @click="toggleEdit(numberEdit)"
  v-html="person.number"
/>

<input
  v-show="employeeNumberEdit"
  ref="number"
>

toggleEdit: function(number){
    this.numberEdit = !number;
    if (this.numberEdit) {
      Vue.nextTick(() => {
        this.$refs.number.$el.focus();
      })
    }
}

我在这里做错了什么？他不知道回调中的this吗？

最佳答案

您的输入框就是这样

<input
  v-show="employeeNumberEdit"
  ref="employeeNumber"
>

并专注于切换，请按照这种方式进行

toggleEdit: function(number){
    this.numberEdit = !number;
    if (this.numberEdit) {
       this.$refs.employeeNumber.focus();
    }
}

下面是正在运行的代码段，当您按下切换按钮时，输入框将被聚焦。

new Vue({
     el: '#app',
     methods:{
          toggleEdit: function(number){
            this.numberEdit = !number;
            this.$refs.employeeNumber.focus();
          }
     }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
  ref="employeeNumber"
>
<button @click="toggleEdit">Toggle</button>
</div>