Vue data getting undefined after axios call in script

Question

I am trying to render markers on my leaflet map from an api utilizing axios. When in my axios call I am getting the data and the data is showing if I {{ data }} in my render template. The problem is when trying to use the data in the same script, just after the axios call to render markers from the data. I get undefined when trying to use the data after the axios call.

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]: Error in mounted hook: "Error: Invalid LatLng object: (undefined, undefined)"

Answer 1

It's tough to say exactly what the problem is, but I'd remove the marker and re-add it when the lat changes , this way you're re-rendering the marker which should solve the problem:

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

Answer 2

axios.get is a async function. Vue Hooks won't wait until the previous hook finished to execute itself if the previous hook contain async function.

In your case, the mounted hook finished before created hook finished, so this.post is still an empty array.

For a good practice, you need to store the map instance in data and add marker to the map in axios.get callback. Here are some sample code.

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);
            })
    }
}