[英]Vue: Set focus to dynamic input box
正如@ramakant-mishra 告诉您必须使用this.$refs
,但您还需要在输入元素上动态添加 ref 属性。 让我演示给你看:
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>
只是不要忘记使用 $nextTick 因为新元素尚未在模板上呈现
他们的关键是将所有input
的ref
设置为相同的字符串,如下所示:
<input type="text" ref="myInputs"/>
然后,您将可以访问事件处理程序中名为this.$refs.myInputs
的数组。
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>
请注意,下面您必须将调用focus()
放在nextTick()
中,以便让 Vue 有机会实际呈现您刚刚添加到列表中的电子邮件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.