es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cuál es el enfoque de un componente dentro de otro en Vue.js?

05 Aug, 2023 Programación

Me gustaría poder enfocar en el campo de entrada cuando se ingresen ciertas teclas. El campo de entrada en el que me gustaría enfocar existe dentro de autocomplete-vue.
Aquí es donde lo llamo:

<autocomplete v-shortkey="['alt', 's']"
@shortkey.native="theAction()"
ref="autocompleteInput"

</autocomplete>

El método theAction que me gustaría permitirme enfocar en el campo de entrada, se ve así:

theAction () {
this.$refs.autocompleteInput.$el.focus()
}

Esto enfoca en toda la sección, lo cual no es lo que quiero. El campo de entrada existe dentro de 2 divs dentro de lo que theAction enfoca. Para una mejor perspectiva, esto es lo que devuelve this.$refs.autocompleteInput.$el :
“`

““

¿Alguna idea sobre cómo puedo enfocar en el campo de entrada con la clase autocomplete-input? ¡Cualquier sugerencia es útil!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para enfocarte en el input con la clase autocomplete-input, puedes modificar tu método theAction para utilizar querySelector y enfocarte directamente en el elemento de input de esta manera:

    theAction() {
  const input = this.$refs.autocompleteInput.$el.querySelector('.autocomplete-input')
  input.focus()
}

    Esto buscará el elemento con la clase autocomplete-input dentro del componente autocomplete y llamará al método focus en ese elemento de input específico.

Comments are closed.