Vuetify Fokus Eingang innerhalb v-für

Question

Ich versuche, auf den nächsten dynamisch eingefügten Eingang zu konzentrieren, kann ich foobar_x aber nicht die in der v-for-Schleife konzentrieren. Jede Hilfe wäre willkommen.

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

Wenn man sich auf ein Element in einer v-for Schleife ein Array auf dieses Element oder die Komponente in this.$refs['name-of-your-value'] und die Referenz erzeugt wird ein ref Wert wird zu diesem Array geschoben.

Also, weil Sie eine ref dynamisch über :ref="'foobar_'+i" hinzufügen, wird der Verweis auf diese Komponenten bei this.$refs.foobar_0[0] und this.$refs.foobar_1[0] sein. Wenn Sie jedoch denselben ref-Wert angeben (z. B. foobar_y), führt Vue die Indizierung für Sie durch, und Ihre Komponenten sind unter this.$refs.foobar_y[0] und erreichbar.

Hier ist ein funktionierendes Beispiel:

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>