Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS: observer object instead of Array

Tags:

arrays

vuejs2

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?

like image 892
Comforse Avatar asked Sep 14 '17 11:09

Comforse


People also ask

What is__ ob__: Observer?

The logging [__ob__: Observer] is normal. The Observer part just indicates that the array is reactive. The array is empty.

What is Observer object in JS?

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.

How do you use observable Vue?

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.

What does data () do in Vue?

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.


1 Answers

Simply do:

var parsedObj = JSON.parse(JSON.stringify(this.$root.members))
console.log(parsedObj)

It will convert the [ob: Observer] to its value

like image 71
guillim Avatar answered Sep 23 '22 03:09

guillim