2

使用 firebase 4.10.1 和 vuefire 1.4.5。

我已经确认我已经初始化了 firebase，导出了一个dbconst，并正确导入了 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 上？

4

1 回答 1

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在模板中使用。

于 2018-03-15T02:46:46.217 回答