Сбросить значение автозаполнения Google после выбора местоположения с помощью VueJs

Question

Мне нужно очистить ввод автозаполнения Google после выбора местоположения.Я присвоил значение данных значению prop компонента, но кажется, что оно не меняется.Даже при использовании часов кажется, что ничего не происходит.

Это мой компонент InputPlace:

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

И вот как я использую его в виде:

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

Надеюсь, вы можете помочь мне, спасибо.

Answer 1

Один из вариантов очистки текстового поля автозаполнения:

a) использовать v-model директиву

<input v-model="selectedAddress" class="form-control pr-5" type="text" id="inputPlace" name="city" placeholder="Ingresa tu ciudad">

b) и сбросить входное значение один раз place_changed Событие запускается так:

google.maps.event.addListener(places, "place_changed", () => {
  this.selectedAddress = "";
});

InputPlace.vue пример

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