En este post te enseñaré a enfocar un campo de texto o input de HTML usando el Framework Vue. Aunque parezca algo muy básico, en realidad hay algunos casos en donde enfocar no es tan fácil.
Te enseñaré cómo enfocar un elemento con Vue, y también con Vuetify.
La forma más fácil de hacerlo es agregando un ref
al elemento:
Y luego invocar desde un método de Vue a la función focus
:
this.$refs.miInput.focus();
De este modo tenemos acceso al elemento en el DOM e invocamos al método nativo focus
en el input.
Si hay problemas con ello, sigue leyendo.
En algunos casos debes esperar a que Vue te avise que ha modificado el DOM y que ya puedes acceder a él. Para ello puedes usar this.$nextTick
dentro de cualquier método, pasando la función a ejecutar, así:
Como te puedes dar cuenta, $nextTick
recibe el callback a ejecutar cuando se haya modificado el DOM y ya puedas acceder de manera segura a los elementos del mismo.
Esto debería funcionar en la mayoría de casos. Y si no, puedes recuperar una referencia al elemento con querySelector en lugar de usar $refs
, igualmente dentro del $nextTick
así:
Esto es más específico a un problema que estuve experimentando con Vuetify y un input que estaba dentro de un diálogo perteneciente a otro componente.
Lo que me sirvió fue vigilar cuando el diálogo estuviera abierto y colocar un setTimeout
. Además, por alguna extraña razón se debe acceder a this.$refs.miInput.$refs.input
.
Pero bueno, el código queda así:
La línea que enfoca al input usando Vue y Vuetify es la 5, pero mira que está en un setTimeout
de 50 milisegundos, de este modo el input se va a enfocar 50 milisegundos después de que el diálogo se abra.
Como lo dije, eso del watch es propio del diálogo. Lo que importa es el setTimeout
.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.