Компонент автозаполнения Google требует обновления для корректной загрузки Vuejs

Question

Я сделал компонент со входом, который загружает автозаполнение Google (InputPlace.vue), и я использую его в двух видах: home и search.

При первой загрузке в Интернете, он работает правильно, я использую компонент из представления Home, чтобы выбрать местоположение и перенаправить в представление Search. После этого я пытаюсь использовать его снова, теперь из вида поиска, но он не показывает местоположения. Итак, мне нужно F5, чтобы он снова заработал.

После этого, если я вернусь к исходному виду и попытаюсь снова использовать компонент, он не работает. Как и раньше, мне нужно F5.

Это мой компонент (InputPlace.vue):

<template>
  <label class="form-label-place" for="city">
    <input class="form-control" type="text" id="inputPlace" name="city" placeholder="Ingresa tu ciudad">
  </label>
</template>
<script>
export default {
  name: 'input-place',
  mounted() {
      // Google autocomplete
      google.maps.event.addDomListener(window, 'load', () => {
        var options = {
          types: ['(cities)'],
          componentRestrictions: {country: "PE"}
        };
        var places = new google.maps.places.Autocomplete(document.getElementById('inputPlace'), options);
        google.maps.event.addListener(places, 'place_changed', () => {
          this.$parent.placeChanged(places)
        });
      });
  }
}
</script>

А вот так я загружаю библиотеку в index.html перед закрытием тела (уже пытался добавить его в голову)

<script async refer src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&sensor=false&language=es&region=PE"></script>

Answer 1

Скорее всего, это происходит, поскольку страница не перезагружается, когда пользователь переходит на маршрут /search.Следовательно, событие onload не запускается, а Autocomplete элемент управления не инициализируется:

google.maps.event.addDomListener(window, 'load', () => {  //<- not triggered
    //..
})

Я бы сказал, что использование окна load событие здесь избыточно, поскольку Autocomplete элемент управления может быть инициализирован в mounted() метод :

<template>
  <label class="form-label-place" for="city">
    <input class="form-control" type="text" id="inputPlace" name="city" placeholder="Search..">
  </label>
</template>
<script>
export default {
  /* global google */

  name: "input-place",
  mounted() {
    const options = {
      types: ["(cities)"]
    };
    const places = new google.maps.places.Autocomplete(
      document.getElementById("inputPlace"),
      options
    );
    google.maps.event.addListener(places, "place_changed", () => {
      //...
    });
  }
};
</script>

Следующая демонстрация демонстрирует, как загрузить API Карт Google и инициализировать Поместить компонент автозаполнения в Vue (с помощью vue-router ) приложение