Reset google autocomplete input value after select a location with VueJs - google-maps

Question

I need to clean up the google autocomplete input after select a location. I assigned a data value to the value prop of the component but seems like it doesn't change. Even using a watch, seem's like nothing happens.
This is my InputPlace component:
<template>
<label class="form-label-place" for="city">
<input class="form-control pr-5" :value="value" type="text" id="inputPlace" name="city" placeholder="Ingresa tu ciudad">
</label>
</template>
<script>
export default {
name: 'input-place',
props: {
value: ''
},
mounted() {
// Google autocomplete
const options = {
types: ['(cities)'],
componentRestrictions: {country: "PE"}
};
const places = new google.maps.places.Autocomplete(document.getElementById('inputPlace'), options);
google.maps.event.addListener(places, 'place_changed', () => {
this.$parent.placeChanged(places)
});
}
}
</script>
And this is how i'm using it into the view:
<template>
...
<input-place :value="InputPlaceValue"></input-place>
</template>
<script>
...
data() {
return {
activePlaces: [],
InputPlaceValue: ''
}
},
methods: {
placeChanged(places) {
let placeName = places.getPlace().name;
if(!this.activePlaces.includes(placeName)) this.activePlaces.push(placeName)
this.InputPlaceValue = ''
}
}
</script>
Hope you can help me, Thank you.

Answer 1

One option to clear autocomplete text field would be to:
a) use v-model directive
<input v-model="selectedAddress" class="form-control pr-5" type="text" id="inputPlace" name="city" placeholder="Ingresa tu ciudad">
b) and clear input value once place_changed event is triggered like this:
google.maps.event.addListener(places, "place_changed", () => {
this.selectedAddress = "";
});
InputPlace.vue example
<template>
<label class="form-label-place" for="city">
<input class="form-control" type="text" id="inputPlace" v-model="selectedAddress" name="city" placeholder="Search..">
</label>
</template>
<script>
export default {
/* global google */
name: "input-place",
data () {
return {
selectedAddress: ''
}
},
mounted() {
const options = {
types: ["(cities)"]
};
const places = new google.maps.places.Autocomplete(
document.getElementById("inputPlace"),
options
);
google.maps.event.addListener(places, "place_changed", () => {
this.selectedAddress = "";
this.$parent.placeChanged(places)
});
}
};
</script>