Vue：将焦点设置为动态输入框

Question

I have a form where user can fill an email address and click a plus button against it to create a new one. These input boxes are generated by iterating over an array. When user clicks on the + icon, a new entry is pushed to this array.

Now the new text box is generating fine but I want the cursor to be focused in this one.

Answer 1

as @ramakant-mishra told you must use this.$refs , but you need to add ref attribute dynamically on your input element also. let me show you:

 new Vue({ el: '#app', data: { emails:[] }, methods: { add: function (e) { let j = this.emails.push("") this.$nextTick(() => { this.$refs[`email${j - 1}`][0].focus() }) } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(email, i) in emails" :key="i"> <input v-model="email" :ref="`email${i}`" /> </div> <button @click="add">add</button> </div>

just don't forget to use $nextTick because the new element is not rendered yet on template

Answer 2

They key is to set ref on all your input s to the same string like this:

<input type="text" ref="myInputs"/>

Then you will have access to an array called this.$refs.myInputs inside an event handler.

 new Vue({ el: "#app", data() { return { emails: [] }; }, methods: { addEmail() { this.emails.push('whatever'); this.$nextTick(() => { const lastIdx = this.emails.length - 1; this.$refs.myInputs[lastIdx].focus(); }); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <div id="app"> <input type="button" @click="addEmail()" value="Add Email"/> <div v-for="(email, index) in emails" :key="index"> <input ref="myInputs" type="text" /> </div> </div>

Note that below you must put the call to focus() inside a nextTick() in order to give Vue a chance to actually render the email you just added to the list.