Vue 通过 refs 将焦点放在输入上

Posted 2023-02-21

【中文标题】Vue 通过 refs 将焦点放在输入上

【英文标题】：Vue put focus on an input via refs

【发布时间】：2021-12-19 10:20:00

【问题描述】：

我使用 v-for 为列表中的每个项目创建输入，我通过以下方式分配 ref

:ref="`input-$index`"

这让我的 $refs 看起来像这样

现在我的问题是；在添加输入时，我还想将重点放在最后一个输入上，但是我无法使其工作。

现在我尝试了这样的事情，

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

但是我觉得这与我不知道如何处理的 refs 的结构有关。

有谁知道我如何访问每个输入以及如何聚焦它（我猜只是 .focus()）。

【参考方案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

【讨论】：

嘿@Boussadjra

@Amaarrockz 你好，我的朋友

我试过这个，我仍然得到“TypeError：无法读取未定义的属性（读取'焦点'）”。我不知道这很重要，但是除了输入之外，我在 v-for 中还有更多内容

你在哪里调用那个焦点函数以及你如何定义参考

我将 ref="inputs" 放在带有 v-for 的元素上，并像这样调用焦点：this.$refs.inputs[this.inputs.length - 1].focus()。我在将一个空字符串推送到输入数组后调用它，这会产生一个新的输入元素。对我来说，这似乎正是你的意思。然而，我认为可能是一个问题，带有 v-for 的元素包含多个元素（离子标签、离子输入和离子图标）

【参考方案2】：

所以我不再确切知道了，但我记得问题在于我将重点放在离子项目而不是离子输入上。我需要添加 .children[i] （我取决于它是什么孩子）。这让我可以把重点放在输入上:)