gmap-autocomplete fail with vue 2.6.8, v-model is [object InputEvent]

[seblucas]

trafficstars

Hi,

I tried upgrading vue to 2.6.8 and gmap-autocomplete does not work anymore.

I use it like that :

<gmap-autocomplete :placeholder="$t('address.searchAddressByGoogleMap')"
                         @place_changed="updateAddress"
                         class="input is-small"
                         v-model="autocomplete"
                         :options="{
                                    bounds: {
                                      north: 55,
                                      south: 40,
                                      east: 0,
                                      west: 1},
                                      strictBounds: true}">
      </gmap-autocomplete>

As soon as I start typing anything in the field it's replaced by [object InputEvent].

I don't know if I'm the first using gmap-autocomplete with vue 2.6.8 ? Thanks in advance for any information.

[dagy304]

I have the same problem. Its not working in the demo either http://xkjyeah.github.io/vue-google-maps/basic-autocomplete.html You could use :value to get the input to show the value but the place_changed event dosn't trigger.

[myonetop]

In gmap-autocomplete <gmap-autocomplete @place_changed="setPlace" @input="autocompleteUser($event, search, index)" v-on:keydown.enter.prevent="onBlurSearchInput">

// method

async autocompleteUser(e, value, index) { if (e.constructor.name !== 'InputEvent') { this.usersAutocomplete = [] return } let that = this await axios.get()//fetching data .then(response => { that.usersAutocomplete = response.data }) }, if you get issue "ReferenceError: axios is not defined", run npm install --save axios

[mpacary]

Got this strange behavior in a project using Quasar Framework. It occurred only when <gmap-autocomplete> was used inside a <q-dialog>, not outside.

FWIW, I've found a workaround to keep it in a <q-dialog> by using <gmap-autocomplete> like this: <gmap-autocomplete :value="yourProp" @place_changed="yourMethod" @input="value = $event.target.value" />

Besides, it turned out that the div containing Google Places results (CSS class pac-container) had CSS properties display: none and its z-index too low... therefore it was completely hidden!

[tsathis]

Got this strange behavior in a project using Quasar Framework. It occurred only when <gmap-autocomplete> was used inside a <q-dialog>, not outside.

FWIW, I've found a workaround to keep it in a <q-dialog> by using <gmap-autocomplete> like this: <gmap-autocomplete :value="yourProp" @place_changed="yourMethod" @input="value = $event.target.value" />

Besides, it turned out that the div containing Google Places results (CSS class pac-container) had CSS properties display: none and its z-index too low... therefore it was completely hidden!

What is :value="yourProp" here?

[mpacary]

@tharindusathis yourProp contains the typed value in the autocompleted field. Instead of "intuitively" using v-model="yourProp", you have to write :value="yourProp" (this is part of the workaround)

Taking the original post as another example, you would write :value="autocomplete" instead of v-model="autocomplete".

[Kawacrepe]

@mpacary How can you keep the selected value after select? For the moment, I can trigger the formatted_address by reassignate this.autocomplete = place.formatted_address; But I want to keep the original choice in my value.

<gmap-autocomplete
@place_changed="dataMaj"
:value="autocomplete"
></gmap-autocomplete>

[mpacary]

It seems that you are missing @input="value = $event.target.value" At the end you should have something like:

<gmap-autocomplete
@place_changed="dataMaj"
:value="autocomplete"
@input="value = $event.target.value"
></gmap-autocomplete>

[Kawacrepe]

Thank, problem solved, I use @onchange.native="" which allow me to stock the selected value and use her later, instead using the place.format_address

[fuoridallarete]

@paul-muckypuddle so how to get the exact string selected (instead of using place.format_address) in vue 2.6.10?

[ingcarloschica]

Can someone help me with the solution of this problem? please

[fuoridallarete]

Sorry long time I don't have a look at this project. I post a piece of my code hoping it can help, but can't look more into it now. I'm afraid.

<gmap-autocomplete
        id="autocompleteStart"
        :value="form.starting_point"
        :select-first-on-enter="true"
        type="text"
        class="inputAddress"
        placeholder="Inserisci punto di partenza"
        @keypress.enter="$event.preventDefault()"
        @place_changed="processStartChanged"
      />

The function related is:

// starting_pont
    processStartChanged(placeStart) {
      this.placeStart = placeStart
      if (this.placeStart) {
        const lat = placeStart.geometry.location.lat()
        const lon = placeStart.geometry.location.lng()

        let starting = ''
        !placeStart.types.includes('route') ? starting = placeStart.name + ' ' + placeStart.formatted_address : starting = placeStart.formatted_address
        this.form.starting_point = starting

        this.starting_point = `${lat},${lon}`
      }
    }

Few things are just related to my own project. x