使用 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 对象。但是，如果我尝试将它加载到数据表上，我会得到 "fbObj is not defined" 作为控制台错误。

如何将我的 firebase 对象加载到数据表中？

Answer 1

代码：

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

创建一个可用于您的 Vue 实例的 this.fbObj。因此，而不是 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')
   }
},

或创建一个computed 属性:

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

然后你可以在Vue实例中使用this.dataTable JavaScript或者在模板中使用dataTable

使用 vuejs，如何将 firebase (vuefire) 对象获取到组件数据中

With vuejs, how do I get firebase (vuefire) object into component data

firebase

firebase-realtime-database

vue.js

vuefire

element-ui