验证v-for中的焦点输入

Question

我试图关注下一个动态插入的输入，我可以关注foobar_x，而不关注v-for循环中的输入。任何帮助，将不胜感激。

此处的Codepen：https：//codepen.io/Moloth/pen/qPRGvz

new Vue({
  el: '#app',
  data: {
    test: "xxxxxx",
    phones: [
      {number: "0000000"},
      {number: "1111111"},    
    ],
  },
  methods: {
    focusPhones: function() {
      this.$refs.foobar_1.focus()
    },
    focusTest: function() {
      this.$refs.foobar_x.focus()
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-text-field label="foobar_x" ref="foobar_x" v-model="test"></v-text-field>
  <div v-for="(value, i) in phones" :key="i">
    <v-text-field :label="'foobar_'+i" :ref="'foobar_'+i" v-model="phones[i].number"></v-text-field>
    
  </div>
  <v-btn @click.native="focusPhones()">Focus foobar_1</v-btn>
  <v-btn @click.native="focusTest()">Focus foobar_x</v-btn>
</div>

Answer 1

当您ref向v-for循环中的元素添加值时，将在中生成一个数组this.$refs['name-of-your-value']，并且对该元素或组件的引用将被推送到该数组。

因此，由于您正在动态添加ref via :ref="'foobar_'+i"，因此对这些组件的引用将位于this.$refs.foobar_0[0]和this.$refs.foobar_1[0]。但是，如果您仅指定相同的ref值（例如foobar_y），则Vue将为您完成索引工作，并且可以在this.$refs.foobar_y[0]和访问组件this.$refs.foobar_y[1]。

这是一个工作示例：

new Vue({
  el: '#app',
  data: {
    test: "xxxxxx",
    phones: [
      {number: "0000000"},
      {number: "1111111"},    
    ],
  },
  methods: {
    focusPhones: function() {
      this.$refs.foobar_y[1].focus()
    },
    focusTest: function() {
      this.$refs.foobar_x.focus()
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-text-field label="foobar_x" ref="foobar_x" v-model="test"></v-text-field>
  <div v-for="(value, i) in phones" :key="i">
    <v-text-field :label="'foobar_'+i" ref="foobar_y" v-model="phones[i].number"></v-text-field>
    
  </div>
  <v-btn @click.native="focusPhones()">Focus foobar_y[1]</v-btn>
  <v-btn @click.native="focusTest()">Focus foobar_x</v-btn>
</div>