google-maps - 使用 VueJs 选择位置后重置谷歌自动完成输入值

Question

我需要在选择位置后清理谷歌自动完成输入。我为组件的 value 属性分配了一个数据值，但似乎它没有改变。即使使用 watch ，也好像什么也没发生。

这是我的 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>

这就是我在 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>

希望您能帮助我，谢谢。

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>