问将v焦点应用于页面上的第一个输入字段

EN

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>

this.$nextTick(() => {
  let index = this.items.length - 1;
  let input = this.$refs.title[index];
  input.focus();
});

<div id="app">
  <ul v-for="item in items">
    <li>
      <input :ref="'title'" v-model="item.title">
    </li>
  </ul>
  <button v-on:click="addItem">Add Item</button>
</div>

let app = new Vue({
  el: '#app',
  data: {
    items: [
      {title: 'Apple'},
      {title: 'Orange'},
    ]
  },
  methods: {
    addItem(){
       this.items.push({title: "Pineapple"});
       this.$nextTick(() => {
         let index = this.items.length - 1;
         let input = this.$refs.title[index];
         input.focus();
      });
    }
  }
});

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

this.$refs.myInputs[0].focus();

new Vue({
  el: "#app",
  
  mounted() {
    this.$refs.myInputs[0].focus();
  }
});

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

<div id="app">
  <div>
    <div v-for="index in 3" :key="index">
      <input ref="myInputs" type="text" />
    </div>
  </div>
</div>