С vuejs, как мне получить объект firebase (vuefire) в данные компонента

Question

Использование firebase 4.10.1 и vuefire 1.4.5.

Я подтвердил, что инициализировал FireBase, экспортировал db const, и импортировал vuefire правильно.

Я пытаюсь загрузить свой объект Firebase (JSON) на мой dataTable данные компонента.

Я пытаюсь это:

export default {
    firebase: function () {
       return {
           fbObj: db.ref('collection')
       }
    },
    data () {
        return {
            dataTable: fbObj
        }
    }
 }

Он подключен правильно, потому что если я использую {{ fbObj }} в моем шаблоне я получаю объект JSON, отображаемый полностью. Однако, если я пытаюсь загрузить его в dataTable, я получаю "fbObj is not defined" как консольная ошибка.

Как я могу загрузить свой объект Firebase в dataTable?

Answer 1

Код:

firebase: function () {
   return {
       fbObj: db.ref('collection')
   }
},

Создает this.fbObj доступны для вашего экземпляра Vue. Так что вместо dataTable: fbObj правильный будет больше похоже на:

data () {
    return {
        dataTable: this.fbObj   // but even this won't work
    }
}

Но это не сработает. Вы не можете сделать это, потому что это data() код инициализации будет выполнен до fbObj был инициализирован (требуется некоторое время, чтобы обновить его из firebase).

Так что если вы хотите dataTable чтобы ссылаться на эту коллекцию, либо:

• Переименуйте объект Firebase в dataTable:

  firebase: function () {
     return {
         dataTable: db.ref('collection')
     }
  },
  

• Или создайте вычисляемое свойство:

  firebase: function () {
     return {
         fbObj: db.ref('collection')
     }
  },
  computed: {
      dataTable() {
          return this.fbObj;
      }
  }
  

Тогда вы можете использовать this.dataTable в экземпляре Vue JavaScript или dataTable в шаблоне.