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.

Enfocando input con Vue

La forma más fácil de hacerlo es agregando un ref al elemento:

<input ref="miInput">

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.

Usando this.$nextTick

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í:

this.$nextTick(() => {
  this.$refs.miInput.focus();
});

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í:

this.$nextTick(() => {
  document.querySelector("#miInput").focus();
});

Con setTimeout

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í:

  watch: {
    mostrar() {
      if (this.mostrar) {
        setTimeout(() => {
          this.$refs.campoNumero.$refs.input.focus();
        }, 50);
      }
    },
  },

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.