I have this small one page VueJS app which uses Firebase. The problem I am currently facing is when I try to retrieve a collection from Firebase in a component. Instead of returning an array, the vue instance returns an observer object, more precisely [__ob__: Observer]
. I understand that Vue JS uses this object to do its magic, what I don't understand is what am I supposed to do to get the actual array. I cannot do anything with that object, can't iterate it. I tried any lifecycle method to try and do it, but no luck. What is weirder is that when I close and open again the Chrome console (F12), the methods get called again and the object is actually resolved into the array. I initially thought that the data may not be retrieved yet, but the data is present in the object itself, I just can't access it.
Here's my code:
Vue instance:
new Vue({
el: '#app',
firebase: {
orders: firebase.database.ref('orders').orderByChild('created_at'),
members: firebase.database.ref('members').orderByChild('created_at')
},
router,
template: '<App/>',
components: { App }
})
Component code:
export default {
data () {
return {
'member': null
}
},
computed: {
isMemberLoaded: function () {
this.member !== null
}
},
mounted: function () {
console.log('mounted')
this.init()
console.log(this.$root.members) // [__ob__: Observer]
},
created: function () {
console.log('created')
console.log(this.$root.members) // [__ob__: Observer]
},
updated: function () {
console.log('updated')
console.log(this.$root.members) // [__ob__: Observer]
},
methods: {
init: function () {
console.log('init')
console.log(this.$root.members) // [__ob__: Observer]
}
}
}
The observer object looks like this:
[__ob__: Observer]
0:
.key:(...)
code:(...)
created_at:(...)
email:(...)
name:(...)
__ob__:Observer {value: {…}, dep: Dep, vmCount: 0}
get .key: ƒ reactiveGetter()
set .key: ƒ reactiveSetter(newVal)
get code: ƒ reactiveGetter()
set code: ƒ reactiveSetter(newVal)
get created_at: ƒ reactiveGetter()
set created_at: ƒ reactiveSetter(newVal)
get email: ƒ reactiveGetter()
set email: ƒ reactiveSetter(newVal)
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
__proto__: Object
length: 1
__ob__: Observer {value: Array(1), dep: Dep, vmCount: 0}
__proto__: Array
What am I missing here?
The logging [__ob__: Observer] is normal. The Observer part just indicates that the array is reactive. The array is empty.
The Observer pattern offers a subscription model in which objects subscribe to an event and get notified when the event occurs. This pattern is the cornerstone of event driven programming, including JavaScript. The Observer pattern facilitates good object-oriented design and promotes loose coupling.
Vue. observable transforms an object into a reactive entity. Vue uses this internally on the object returned by the data function. When changed, the resulting object can be directly utilized inside render functions and calculated properties, and it will trigger necessary modifications.
data # A function that returns the initial reactive state for the component instance. The function is expected to return a plain JavaScript object, which will be made reactive by Vue.
Simply do:
var parsedObj = JSON.parse(JSON.stringify(this.$root.members))
console.log(parsedObj)
It will convert the [ob: Observer] to its value
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With