Vue：将焦点设置到动态输入框答案

【问题标题】：Vue: Set focus to dynamic input boxVue：将焦点设置到动态输入框
【发布时间】：2020-01-15 10:18:30
【问题描述】：

我有一个表单，用户可以在其中填写一个电子邮件地址，然后单击一个加号按钮来创建一个新的。这些输入框是通过遍历数组生成的。当用户单击 + 图标时，会将一个新条目推送到此数组。

现在新文本框生成正常，但我希望光标集中在这个文本框上。

【问题讨论】：

你能分享你的代码吗？

【解决方案1】：

正如@ramakant-mishra 告诉您必须使用this.$refs，但您还需要在输入元素上动态添加 ref 属性。让我告诉你：

new Vue({
  el: '#app',
  data: {
    emails:[]
  },
  methods: {
    add: function (e) {
      let j = this.emails.push("")
      this.$nextTick(() => {
        this.$refs[`email${j - 1}`][0].focus()
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(email, i) in emails" :key="i">
    <input v-model="email" :ref="`email${i}`" />
  </div>
  <button @click="add">add</button>
</div>

只是不要忘记使用 $nextTick，因为新元素尚未在模板上呈现

【讨论】：

【解决方案2】：

他们的关键是将所有inputs 上的ref 设置为相同的字符串，如下所示：

<input type="text" ref="myInputs"/>

然后您将可以在事件处理程序中访问一个名为 this.$refs.myInputs 的数组。

new Vue({
  el: "#app",

  data() {
    return {
      emails: []
    };
  },
  
  methods: {
    addEmail() {
      this.emails.push('whatever');
      this.$nextTick(() => {
          const lastIdx = this.emails.length - 1;
          this.$refs.myInputs[lastIdx].focus();
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <input type="button" @click="addEmail()" value="Add Email"/>
  <div v-for="(email, index) in emails" :key="index">
    <input ref="myInputs" type="text" />
  </div>
</div>

请注意，下面您必须将对 focus() 的调用放在 nextTick() 中，以便让 Vue 有机会实际呈现您刚刚添加到列表中的电子邮件。

【讨论】：