Vue：将焦点设置为动态输入框

Question

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

现在新的文本框生成得很好，但我希望光标集中在这个文本框上。

Answer 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 因为新元素尚未在模板上呈现