javascript - vue对焦输入找不到输入框

Question

我正在尝试集中输入字段，但出现此错误:

Error in nextTick: "TypeError: Cannot read property 'focus' of undefined"

这是我的代码

<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在回调中？

Answer 1

你的输入框是这样的

<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>