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

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

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

导出默认值{
名称：'输入位置'，
道具：{
值：“”
},
安装的（）{
//谷歌自动完成
常量选项={
类型：['（城市）]，
组件限制：{country:“PE”}
};
const places=new google.maps.places.Autocomplete（document.getElementById（'inputPlace'），选项）；
google.maps.event.addListener（places，'place_changed'，（）=>{
此.$parent.placeChanged（位置）
});
}
}

这就是我在视图中使用它的方式：

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

...
...
数据（）{
返回{
活动地点：[]，
InputPlaceValue:“”
}
},
方法：{
地点更改（地点）{
让placeName=places.getPlace（）.name；
如果（！this.activePlaces.includes（placeName））this.activePlaces.push（placeName）
this.InputPlaceValue=“”
}
}

---

希望您能帮助我，谢谢。

清除自动完成文本字段的一个选项是：

a） 使用

v-model

指令

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

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>

导出默认值{
/*全球谷歌*/
名称：“输入地点”，
数据（）{
返回{
所选地址：“”
}
},
安装的（）{
常量选项={
类型：[“（城市）”]
};
const places=new google.maps.places.Autocomplete(
document.getElementById（“inputPlace”），
选择权
);
google.maps.event.addListener（places，“place_changed”，（）=>{
this.selectedAddress=“”；
此.$parent.placeChanged（位置）
});
}
};

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