Vuetify 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

当在v-for环路的阵列将在this.$refs['name-of-your-value']来生成ref值添加到一个元件，并且参照该元件或组件将被推送到该阵列。

所以，因为你通过动态: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>