javascript - 在 Vue JS 中调用 axios 后焦点()不起作用

Question

我有一个 form在 Vue JS通过 axios 提交调用后axios我想专注于一个特定的 input元素，但它不能正常工作。
这是input :

<input type="text" class="form-control mb-2" :id="'txtTazkira' + s.id" 
 @input="setTxtTazkira($event, s.id)" :value="s.tazkira" />  

在表单提交时调用以下函数:

submitForm() {
  this.form.txtTazkira = this.txtTazkira
  this.form.selectedNotebook = this.selectedNotebook.id
  this.nextSlot = document.getElementById('txtTazkira' + (this.form.slotId + 1))

  axios
    .patch('/Notebook/api/slots/' + this.form.slotId, this.form)
    .then((response) => {
      this.tazkiraSaved = true
      this.fetchSlots()

      this.nextSlot.focus()
      console.log(this.nextSlot)
    })
    .catch((errors) => {
      alert('Unable to save Tazkira, There might be some issues.')
      this.tazkiraSaved = false
    })
},

可以看出，在 axios 调用之后我有 this.nextSlot.focus()它没有将焦点设置为 input元素。我也尝试执行以下操作但没有奏效:

this.$nextTick(() => {
    this.nextSlot.focus();
});  

我还尝试了以下添加 :ref="'txtTazkira' + s.id" 的地方:

<input type="text" class="form-control mb-2" :id="'txtTazkira' + s.id" 
@input="setTxtTazkira($event, s.id)" :value="s.tazkira" :ref="'txtTazkira' + 
s.id">  

然后在 js 中尝试了以下操作但仍然无法正常工作:

var newSlot = 'txtTazkira' + (this.form.slotId + 1);

axios.post(.....)
{
  ...... 
  this.$nextTick(() => {
     this.$refs[newSlot].focus();
   });
}

我搜索了谷歌并找到了一些相关的讨论，但这并没有解决我的问题，因此我在这里发布了这个问题。
任何帮助都提前表示赞赏。

Answer 1

在发布第一个答案之前，我开始在我的 Vue CLI 沙箱应用程序中创建一个测试组件。我没用

this.$refs.input2.$el.focus();

但是当我将其更改为时确实有效

this.$refs.input2.focus();

这是测试组件:

<template>
  <div class="set-focus">
    <div class="row">
      <div class="col-md-3">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label>Input One</label>
            <input type="text" class="form-control" ref="input1">
          </div>
          <div class="form-group">
            <label>Input Two</label>
            <input type="text" class="form-control" ref="input2">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      submitForm() {
        console.log('submitForm')
        // Simulate API call
        setTimeout( () => {
          this.$refs.input2.focus();
        }, 2000)
      }
    }
  }
</script>