Данные Vue становятся неопределенными после вызова axios в скрипте

Question

Я пытаюсь визуализировать маркеры на моей листовой карте из API, использующего axios. Когда я звоню в axios, я получаю данные, и данные отображаются, если я {{ data }} в моем шаблоне рендеринга. Проблема заключается в том, что при попытке использовать данные в одном и том же скрипте сразу после вызова axios для рендеринга маркеров из данных. Я получаю undefined при попытке использовать данные после вызова axios.

export default {
      type: Array,
      data () {
        return {
          post: [],
        }
      }, 
      created () {
        axios.get("")
          .then((response)  =>  {
          // console.log(response.data.resource)
          this.post = response.data.resource;
          // console.log([this.post.lat])
        }).catch(error => {
          console.log(error.message);
        })
      },
      mounted () {
        var mymap = L.map(this.$refs['mapElement']).setView([40.783058, -73.971252], 12);
        var myIcon = L.icon({
          iconUrl: redMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],
        })
        var myIcon2 = L.icon({
          iconUrl: greenMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],

        })
        var marker = L.marker([40.783058, -73.971252], {icon: myIcon}).addTo(mymap);
          // console.log([this.post[0].lat])
        var marker2 = L.marker([this.post.lat, this.post.lng], {icon: myIcon2}).addTo(mymap);

[Vue warn]: ошибка в подключенном хуке: «Ошибка: недопустимый объект LatLng: (не определено, не определено)»

Answer 1

axios.get - асинхронная функция. Vue Hooks не будет ждать, пока предыдущий хук завершит свою работу, если предыдущий хук содержал асинхронную функцию.

В вашем случае смонтированный хук завершил работу до того, как созданный хук закончил, поэтому this.post все еще пустой массив.

Для хорошей практики вам нужно сохранить экземпляр map в данных и добавить маркер на карту в обратном вызове axios.get. Вот пример кода.

export default {
    type: Array,
    data() {
        return {
            mymap: null,
            post: []
        }
    },
    created() {},
    mounted() {
        this.mymap = L.map(this.$refs['mapElement']).setView([40.783058, -73.971252], 12);
        var myIcon = L.icon({
            iconUrl: redMarker,
            iconSize: [38, 95],
            iconAnchor: [22, 94],
            popupAnchor: [-3, -76],
        })
        var myIcon2 = L.icon({
            iconUrl: greenMarker,
            iconSize: [38, 95],
            iconAnchor: [22, 94],
            popupAnchor: [-3, -76],

        })
        var marker = L.marker([40.783058, -73.971252], { icon: myIcon }).addTo(mymap);
        // console.log([this.post[0].lat])

        axios.get("")
            .then((response) => {
                // console.log(response.data.resource)
                this.post = response.data.resource;
                var marker2 = L.marker([this.post.lat, this.post.lng], { icon: myIcon2 }).addTo(this.mymap);
                // console.log([this.post.lat])
            }).catch(error => {
                console.log(error.message);
            })
    }
}

Answer 2

Трудно точно сказать, в чем проблема, но я бы убрал маркер и добавил его снова, когда lat изменится, таким образом, вы перерисовываете маркер, который должен решить проблему:

watch: {
    'post.lat': (newLat, oldLat) => {
        //we should destroy the marker here and regenerate it.
    }
}