VueJS：观察者对象而不是数组

Question

我有这个使用 Firebase 的小型单页 VueJS 应用程序。我目前面临的问题是当我尝试从组件中的 Firebase 检索集合时。vue 实例不返回数组，而是返回一个观察者对象，更准确地说[__ob__: Observer]。我知道 Vue JS 使用这个对象来发挥它的魔力，我不明白的是我应该怎么做才能得到实际的数组。我不能对那个对象做任何事情，不能迭代它。我尝试了任何生命周期方法来尝试并做到这一点，但没有运气。更奇怪的是，当我关闭并再次打开 Chrome 控制台 (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 : Observer]转换为其值

Answer 2

我不知道这个 firebase 东西是如何工作的。但我确信您可以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]
        }
      }
    }