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')
   }
},

创建可用于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')
   }
},

或创建计算属性：

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

然后，您可以在Vue实例JavaScript中使用this.dataTable或在模板中使用dataTable。

使用vuejs，如何将firebase（vuefire）对象转换为组件数据

1 个答案: