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] （我取决于它是什么孩子）。 这让我可以将焦点放在输入中:)