VueJS + Firebase数据推送

Question

Component code:

  let booksRef = db.ref().child('books')
  export default {
    name: 'google-map',
    firebase: function () {
      return {
        books: booksRef
      }
    },
    data: function () {
      return {
        markerCoordinates: [],
        markers: []
      }
    },
    created: function () {
      booksRef.on('value', snap => {
        snap.forEach(childSnap => {
          var childVal = childSnap.val();
           this.markerCoordinates = childVal.position;
        });
      });

    },
    mounted: function () {
      const element = document.getElementById(this.mapName)
      const mapCentre = this.markerCoordinates[0]
      const options = {
        center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude)
      }
      this.map = new google.maps.Map(element, options);
      this.markerCoordinates.forEach((coord) => {
        const position = new google.maps.LatLng(coord.latitude, coord.longitude);
        const marker = new google.maps.Marker({
          position,
          map: this.map
        });
        this.markers.push(marker)
      });
    }
  };

error capture :

I want to expose markers stored in firebase Why does not the markerCoordinates contain data?

Answer 1

The problem is that you establish a connection to listen on values for your collection, and at the moment you try to access the this.markerCoordinates it is empty (so this error is because the lifecycle and asynchronous handling). There are some solutions here:

1. Move your Firebase listener ( created hook) to the on mounted hook and then call the code you have in the mounted lifecycle hook (you can create a separate method for this and call it once this.markerCoordinates is not empty)
2. I see you are using Vuefire bindings, you should stick to how the structure is suggested there