0
146
VistasVue puso el foco en una entrada a través de referencias
Uso v-for para crear entradas para cada elemento en una lista, asigno una referencia de la siguiente manera
:ref="`input-${index}`"lo que hace que mis $refs se vean así
Ahora mi pregunta es; al agregar una entrada, también quiero enfocarme en la última entrada, sin embargo, no puedo lograr que funcione.
En este momento probé algo como esto,
this.$refs["input-" + index.toString()].focus()sin embargo, siento que tiene que ver con la estructura de referencias con las que no sé cómo lidiar.
¿Alguien sabe cómo puedo acceder a cada entrada y cómo enfocarla (supongo que solo .focus()).
2 Respuestas
Responde la pregunta0
Parece que está usando ref dentro de un bucle v-for, en este caso se recomienda usar la referencia en el elemento raíz que contiene la directiva v-for de la siguiente manera:
<input v-for="(item, index) in items" ref="inputs" .../>esto creará una matriz de los elementos a los que se hace referencia que podría usar como:
this.$refs.inputs[someIndex].focus()o
this.$refs.inputs[this.$refs.inputs.length-1].focus() // focus on the last input0
Así que ya no sé exactamente, sin embargo, recuerdo que el problema era que me estaba enfocando en el elemento de iones en lugar de la entrada de iones. Necesitaba agregar .children[i] (dependiendo de qué niño sea). esto me permitió poner el foco en la entrada :)