Clear autocomplete

[vaishali-ghayal]

How to clear autocomplete text input after adding location?

[xkjyeah]

Make sure :value is set to some property, then set that property to the empty string

On 6 Sep 2017 10:17 pm, "vaishali-ghayal" [email protected] wrote:

How to clear autocomplete text input after adding location?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/207, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRw4kdaIjBQfCMDTK0AJdGx9YIaRjks5sfqlqgaJpZM4POcWc .

[dipapazacharias]

It does not work for me for some reason. Here is my code:

<gmap-autocomplete
  ref="autocomplete"
  @place_changed="setPlace"
  :placeholder="$t('Enter address')"
  :value="addressInput"
  :options="autocompleteOptions"
  :select-first-on-enter="true"
  class="address-input"></gmap-autocomplete>
<button @click.stop="onClearAddressClick"><i class="material-icons">clear</i></button>



export default {
  name: 'AddAddress',
  data(){
    return {
      addressInput: '',
      autocompleteOptions: {
        componentRestrictions: { country: 'gr' }
      },
      autocomplete: null,
      map: null,
      markerIcon: '/static/img/icons/baseline-location.svg',
      place: null,
      position: null,
      mapOptions: {
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
        zoomControl: false
      }
    }
  },
  methods: {
    onClearAddressClick(){
      console.log("clear")
      this.addressInput = ''
    },
  }

I am forced to do this in order to work, which does the trick but gives me a vue warning on console:

this.autocomplete = this.$refs.autocomplete
this.autocomplete.value = undefined

[spencerfrost]

I'm also having this same issue. I've tried all of the above solutions to no avail. Has anyone had any luck with this?

[richardfeliciano]

Same problem here, try everything and nothing seems to work

[atulrnt]

Same for me, I've set :value to this.search, when I write something in the <input>, it does not update this.search and same thing the other way around.

However, when I update the value of search in the Vue Devtools, it does update the <input>.

As a temporary workaround, I've added a ref autocomplete on the <gmap-autocomplete ref="autocomplete"> component and added the following line in my place_changed event handler : this.$refs.autocomplete.$el.value = this.search;

I'm using Vue.js version 2.5.22.

[mattias-persson]

@atudoll The :value property should be search, not this.search. This setup works for me:

<GmapAutocomplete @place_changed="searchOrSetPlace" :value="search" />

<button @click="clearField()">Clear</button>

data: () => ({
  search: null
}),

methods: {
  clearField () {
    this.search = null
  }
}

[RomanCzujko]

mattias-persson: thank you bro

[modavidc]

Only solution of @atulrnt worked for me.

Thanks a loot.