Применить v-focus к первому полю ввода на странице

Question

У меня есть компонент Vue, в котором я пытаюсь автоматически сфокусировать первое поле, используя v-focus. Но моя проблема в том, что у меня есть динамические компоненты, которые будут включены вверху страницы. Так в таком случае, как я могу применить автофокус к динамически включенному компоненту?

Answer 1

Трудно сказать, как вы добавляете ввод (ы) к DOM, без какого-либо псевдокода от вас, но это один из способов сделать это ..

[CodePen зеркало ]

new Vue({
  el: "#app",
  data: {
    inputs: ["firstName", "lastName"]
  },
  watch: {
    inputs() {
      this.$nextTick(() => {
        this.focusFirstInput();
      });
    }
  },
  methods: {
    focusFirstInput() {
      let first = this.inputs[0];
      let firstInput = this.$refs[first][0];
      firstInput.focus();
    },
    handleClick() {
      this.inputs.push("newInput");
    }
  },
  mounted() {
    this.focusFirstInput();
  }
});

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

<div id="app">
  <div>
    <div v-for="(input, index) in inputs" :key="index">
      <input :ref="input" type="text" />
    </div>
    <div>
      <button type="button" @click="handleClick">Click to add input</button>
    </div>
  </div>
</div>