vuejs + передача данных в Firebase

Question

Код компонента:

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

ошибка захвата:

Я хочу выставить маркеры, хранящиеся в FireBase Почему маркерные координаты не содержат данных?

Answer 1

Проблема заключается в том, что вы устанавливаете соединение для прослушивания значений для вашей коллекции, и в данный момент вы пытаетесь получить доступ к this.markerCoordinates, оно пустое (поэтому эта ошибка связана с жизненным циклом и асинхронной обработкой). Здесь есть несколько решений:

1. Переместите прослушиватель Firebase (created hook) на крючок on mounted и затем вызовите код, который вы используете в mounted ловушке жизненного цикла (вы можете создать отдельный метод для этого и вызвать его один раз this.markerCoordinates не пусто)
2. Я вижу, вы используете привязки Vuefire , вам следует придерживаться того, как там предлагается структура