[go: nahoru, domu]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Como obtener el valor ingresado en el input del componente autocomplete #72

Open
GenaroHV opened this issue Nov 4, 2021 · 5 comments
Open

Comments

@GenaroHV
Copy link
GenaroHV commented Nov 4, 2021

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
Copy link

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:
Captura de Pantalla 2022-02-03 a la(s) 7 26 03 p m

Ejemplo de la implementación:
Captura de Pantalla 2022-02-03 a la(s) 7 26 45 p m

¡Saludos!

@asdrubalp9
Copy link

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
Copy link
fripas commented Apr 2, 2022

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
Copy link
asdrubalp9 commented Apr 2, 2022

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
Copy link
fripas commented Apr 2, 2022

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 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants