VueJ: 어레이가 아닌 옵서버 객체

VueJ: 어레이가 아닌 옵서버 객체

Firebase를 사용하는 작은 1페이지 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

내가 뭘 놓쳤지?

간단한 조작:

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

[ob: Observer]를 값으로 변환합니다.

이 파이어베이스가 어떻게 작동하는지는 모르겠지만 $firebase 오브젝트에 접속할 수 있습니다.this각 컴포넌트에서 데이터를 찾을 수 있습니다.

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

그래서 @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파이어베이스 레퍼런스를 스코프에 포함시키지 않습니다.

언급URL : https://stackoverflow.com/questions/46217907/vuejs-observer-object-instead-of-array