Vue 通過 refs 將焦點放在輸入上

Question

我使用 v-for 為列表中的每個項目創建輸入，我按以下方式分配一個引用

:ref="`input-${index}`"

這使我的 $refs 看起來像這樣

現在我的問題是； 在添加輸入時，我還想將重點放在最后一個輸入上，但是我無法使其工作。

現在我嘗試了這樣的事情，

this.$refs["input-" + index.toString()].focus()

但是我覺得這與我不知道如何處理的參考結構有關。

有誰知道我如何訪問每個輸入以及如何聚焦它（我猜只是 .focus()）。

Answer 1

似乎您在 v-for 循環中使用了 ref，在這種情況下，建議在包含v-for指令的根元素中使用 ref，如下所示：

 <input v-for="(item, index) in items" ref="inputs" .../>

這將創建一個引用元素的數組，您可以像這樣使用它們：

 this.$refs.inputs[someIndex].focus()

或者

 this.$refs.inputs[this.$refs.inputs.length-1].focus() // focus on the last input

Answer 2

所以我不再確切知道了，但是我記得問題是我把重點放在了離子項目而不是離子輸入上。 我需要添加 .children[i] （我取決於它是什么孩子）。 這讓我可以將焦點放在輸入中:)