フォーカス入力をv-insideに入れよう

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

もしアレイがthis.$refs['name-of-your-value']に生成されるv-forループの要素、およびその要素またはコンポーネントへの参照にref値を追加その配列にプッシュされます。

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