Vue：將焦點設置為動態輸入框

Question

我有一個表單，用戶可以在其中填寫一個電子郵件地址，然后單擊它旁邊的加號按鈕來創建一個新的。 這些輸入框是通過迭代數組生成的。 當用戶點擊 + 圖標時，一個新條目被推送到這個數組。

現在新的文本框生成得很好，但我希望光標集中在這個文本框上。

Answer 1

正如@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 因為新元素尚未在模板上呈現

Answer 2

他們的關鍵是將所有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 有機會實際呈現您剛剛添加到列表中的電子郵件。