使用 vuejs,如何将 firebase (vuefire) 对象获取到组件数据中
With vuejs, how do I get firebase (vuefire) object into component data
使用 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 对象加载到数据表中?
代码:
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
使用 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 对象加载到数据表中?
代码:
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