vue.js - 在 v-for 中验证焦点输入

Question

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

代码笔在这里: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="'foobar_'+i" 动态添加 ref，所以对这些组件的引用将位于 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>