CODEWITHSUNDEEP
javascriptgoogle-mapsvue.jsgoogle-places-apivuetify.js
Jonathan
Jonathan

Reputation: 163

Vuetify <v-text-field> clears input after clicking on result from Google Maps autocomplete

I have a page which contains a <v-text-field> and I have added GoogleMaps autocomplete support to it. However, it seems like Vuetify clears the input after the user selects an address.

I found out that the issue is related to the input's blur event.

Any ideas on how to tackle this issue and allow the address to remain in the input?

He's a working example of the issue on Codepen: https://codepen.io/jfmachado01/full/YRMpVL/

<v-text-field
  id="autocomplete"
  prepend-icon="place"
  placeholder="Address"
>

And here's a GIF of the issue: Disabling the javascript blur event

Upvotes: 0

Views: 1349

Answers (1)

Eder D&#237;az
Eder D&#237;az

Reputation: 2071

I think that the google maps autocomplete is meant to be used more in a jquery way, but if you want to use it inside Vue, you'll have to use v-model and an address variable to make the value not disappear:

<v-text-field
  v-model="address" // this will sync the address value in data and the component
  id="autocomplete"
  prepend-icon="place"
  placeholder="Address"
>

Then in the script part of your code:

new Vue({
  store,
  el: '#app',
  data () {
    return {
      address: '', // add this data variable
      states: [],
      autocomplete: null,
    }
  },

  // inside the mounted hook:
  this.autocomplete.addListener("place_changed", () => {
    var place = self.autocomplete.getPlace();
    this.address = place.name; // update the value
  });

Upvotes: 1

Related Questions