Vue: установить фокус на поле ввода Dynami c

Question

У меня есть форма, в которой пользователь может заполнить адрес электронной почты и щелкнуть кнопку «плюс», чтобы создать новый. Эти поля ввода генерируются путем итерации по массиву. Когда пользователь нажимает на значок +, новая запись помещается в этот массив.

Теперь новое текстовое поле генерируется нормально, но я хочу, чтобы курсор был в нем сфокусирован.

Answer 1

как @ ramakant-mishra сказал, что вы должны использовать this.$refs, но вам также необходимо динамически добавлять атрибут ref в ваш элемент input. позвольте мне показать вам:

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, потому что новый элемент еще не отображается в шаблоне