Vuejs проблемы жизненного цикла, массив данных заполняется только после того, как загрузчик Webpack обновил элемент на странице? маркеры карт Google не отображаются?

Question

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

Контекст

В настоящее время у меня есть массив объектов гусей:

[
    {
        "id": 74,
        "created_at": "Jan 14 08:24:46 PM",
        "latitude": "<a coord near me>",
        "longitude": "<a coord near me>"
    },
    {
        "id": 73,
        "created_at": "Jan 14 06:56:33 PM",
        "latitude": "<a coord near me>",
        "longitude": "<a coord near me>"
    }
]

Что я пытаюсь сделать

Я пытаюсь преобразовать этот массив объектов-гусей в другой массив маркеров, содержащий объекты позиции с широтой / долготой, которые я могу передать в карты Google и показать маркеры.

Проблемы

Карта показывается, и получение текущего местоположения + центрирование работает нормально.

По какой-то причине мой массив маркеров заполняется только тогда, когда мой загрузчик веб-пакетов перезагружает элемент на странице (например, если я делаю случайный оператор console.log в моем методе "getMarkers ()"). Не правильно заполняется при начальной загрузке страницы. Я пытался просмотреть документацию по жизненному циклу vue, но просто не могу заставить ее работать.

Кроме того, когда маркеры загружаются правильно (проверено с расширением vue devtools chrome) они по-прежнему не отображаются в приложении как маркеры (но когда я вручную вхожу в макеты с vue devtools, они появляются?).

Мой код

<template>
  <div>
    <gmap-map :center="this.center" :zoom="15" style="width:100%;  height: 400px;">
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
<script>
export default {
  name: "GoogleMap",
  props: {
    geese: Array
  },
  data() {
    return {
      markers: [],
      center: {}
    };
  },
  methods: {
    geolocate() {
      navigator.geolocation.getCurrentPosition(position => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
      });
    },
    getMarkers() {
      console.log("in getMarkers")
      for (var goose of this.geese) {
        console.log("got into for loop of geese")
        console.log("dsdfss")
        const marker = {
          lat: parseFloat(goose.latitude),
          lng: parseFloat(goose.longitude)
        };
        this.markers.push({ position: marker });
      }
    }
  },
  mounted() {
    this.geolocate();
    this.getMarkers()
  }
};
</script>

Еще раз спасибо за любую помощь.

Answer 1

Исправлена ​​проблема!

мой смонтированный код выглядит следующим образом:

mounted() {
  document.onreadystatechange = () => {
     if (document.readyState == "complete") {
       console.log('Page completed')
       this.getMarkers()
     }
   }
}

я также помещаю "this.geolocate ()" в созданный