Como obtener el valor ingresado en el input del componente autocomplete

[GenaroHV]

Hola a todos, mi pregunta es ¿Cómo puedo obtener el valor ingresado en el input de autocomplete? Quería hacer un v-model en el componente GMapAutocomplete pero no me muestra el valor ingresado del componente :c ¿Alguna sugerencia de como podría obtener este valor? Gracias.

[felipeteko]

Puedes hacer un ref y obtener el valor del input nativo, o de preferencia implementa el evento @place_changed y accede a la propiedad formatted_address.

Ejemplo del componente:

Ejemplo de la implementación:

¡Saludos!

[asdrubalp9]

hola @felipeteko, estaba viendo lo que hacias y lo estaba tratando de implementar en vue3 pero no con el composition API. tengo una duda, cada vez que escribo veo que realiza un request, pero no me aparecen las sugerencias, y solo veo que se emite el onSelect cuando presiono enter.

deberian aparecer las sugerencias? hay forma de obtener las coordenadas por esta via tambien?

[fripas]

hola @felipeteko, estaba viendo lo que hacias y lo estaba tratando de implementar en vue3 pero no con el composition API.

tengo una duda, cada vez que escribo veo que realiza un request, pero no me aparecen las sugerencias, y solo veo que se emite el onSelect cuando presiono enter.

deberian aparecer las sugerencias? hay forma de obtener las coordenadas por esta via tambien?

Hola @asdrubalp9 no me queda muy claro lo que intentas hacer, ¿podrías compartir parte del código que estás implementando?

[asdrubalp9]

Hola @fripas, gracias por tu pronta respuesta, basicamente tengo un modal en el que tengo el autocomplete, pero tiene tantas validaciones y cosas locas que voy a poner las partes importantes nada mas

<template>
      <GMapAutocomplete
                                  class="google-input"
                                  type="search"
                                  placeholder="Dirección de destino"
                                  @place_changed="onSelect"
                                  ref="refDireccion"
                                >
                              </GMapAutocomplete>
</template>
<script>
export default {
   data () {
          refDireccion: ref(null),
    },
    methods: {
         onSelect (place) {
           console.log('place', place, this.refDireccion) // solo muestra algo cuando le doy a enter, pero no salen las sugerencias. y tampoco sale algun error en la consola
           this.state.search = place.formatted_address
      // emit('onSelect', place)
    },
    onClear () {
      // this.search = null
      // this.refDireccion.value.$el.value = ''
      // emit('onClear', this.state.search) 
    },
   }
}
</script>

no se que mas tendria que poner.

[fripas]

Qué tal @asdrubalp9 creo que justo la confusión que tienes es entre composition y options más allá del plugin.

Creo que podemos separarlo en dos, la primera, la razón del porqué no te aparecen las opciones del autocomplete:

Esto puede ser por algún estilo que esté haciendo que el plugin quede por detrás.

La segunda es la forma en la que estás implementando el ejemplo, te paso la documentación que incluye el ejemplo con options api como lo estás trabajando tu: https://vue-map.netlify.app/components/autocomplete.html

Si sigues teniendo problemas, podrías subir tu código a stack litz o alguna plataforma similar y con gusto podría ayudarte 😀