vuejs:观察者对象而不是数组

Question

我有使用firebase的小页vuejs应用程序。我目前面临的问题是，当我尝试从组件中的firebase检索一个集合时。VUE实例没有返回数组，而是返回一个观察者对象，更精确地是[__ob__: Observer]。我知道Vue JS使用此对象来做魔术，我不明白的是我应该做什么来获得实际的数组。我不能用那个对象做任何事情，无法迭代它。我尝试了任何生命周期方法尝试这样做，但没有运气。怪异的是，当我再次关闭并再次打开Chrome Console（F12）时，方法再次调用，并且对象实际上已解决到数组中。我最初认为数据可能尚未检索，但是数据本身中存在，我只是无法访问它。

这是我的代码：

vue实例：

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

组件代码：

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]
    }
  }
}

观察者对象看起来像这样：

[__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

我在这里缺少什么？

Answer 1

简单地做：

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

它将转换 [ ob ：观察者] 的值

Answer 2

我不知道这个壁炉的事情是如何工作的。但是我确定您可以在每个组件中使用this访问$ firebase对象，因为它显然是全局的并在那里找到您的数据。

export default {
      data () {
        return {
          'member': null
        }
      },
      firebase: {
         members: db.ref('members')
       },
      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]
        }
      }
    }

Answer 3

因此，在@georgi Antonov的帮助下，我设法以这种方式解决了我的问题：

我像这样更改了组件：

methods: {
    init: function () {
      let _vm = this
      let _id = _vm.$route.params.id
      _vm.$root.$firebaseRefs.members.child(_id).on('value', function (d) {
        console.log(d.val())
      })
    }
  }

基本零件是_vm.$root.$firebaseRefs.members。这实际上可以在firebase对象（集合？）中解析，从那里您可以访问数据。child函数仅通过传递的ID检索元素。这不是数组，但我不需要一个数组，因为我不需要搜索。为了获取整个列表，只需更改为 _vm.$root.$firebaseRefs.members.on('value', function() {}。

虽然Georgi Antonov提供了上述答案，但这并不完全正确。firebase引用是在VUE实例中定义的，您无需在组件中再次声明它们。因此， this不会在范围中没有firebase ref。