Vuetify focus entrée à l'intérieur de v-pour

Question

Je suis en train de mettre l'accent sur la prochaine entrée dynamiquement insérée, je peux concentrer foobar_x mais pas ceux de la boucle v-for. Toute aide serait appréciée.

Codepen ici: 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

Lorsque vous ajoutez une valeur ref à un élément dans une boucle v-for un tableau sera généré en this.$refs['name-of-your-value'], et la référence à cet élément ou d'un composant sera poussé vers ce tableau. Par conséquent, étant donné que vous ajoutez dynamiquement une référence via :ref="'foobar_'+i", la référence à ces composants sera this.$refs.foobar_0[0] et this.$refs.foobar_1[0]. Mais, si vous spécifiez la même valeur ref (disons foobar_y), Vue fera le travail d'indexation pour vous et vos composants seront accessibles au this.$refs.foobar_y[0] et this.$refs.foobar_y[1].

Voici un exemple de travail:

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>