Question

好的，伙计们，我今天整天遇到一个小问题，试图解决，交易就这样...

我正在从firebase中获取一些数据，以使用异步功能将其呈现在html模板上

我有一个像这样的fetchList方法：

async mounted() {
      let ret = await this.fetchJobRequireList()
      console.log('fetchjoblist' , ret)

    async fetchJobRequireList() {
        // debugger
        let services = JSON.parse(sessionStorage.getItem('required_services'))
        services != null ? this.required_services = services : null

        let docs_ = []
        let result = []
        if (!services) {
          // this.required_services = []
          // get required services per user id
          let collections = this.$options.firebase.functions().httpsCallable('getRequiredServices')

          let docs = await this.$options.firebase.firestore().collection('required_services').get()
          // console.log('required services docs', docs)

          let _ = this
          for (let doc of docs.docs) {

            result[doc.id] =
            await collections({doc_id: doc.id}).then( async r => {
              // debugger
              let collections_ = r.data.cols
              docs_ = []
              _.required_services[doc.id] = []
              for (let collection of collections_) {
                let path = collection._referencePath.segments

                // let documents =
                let __ = _
                await this.$options.firebase.firestore().collection(path[0])
                  .doc(path[1]).collection(path[2]).get()
                  .then(async documents => {
                    // console.log('__documents__', documents)
                      for (let doc_ of documents.docs) {
                      doc_ = await documents.docs[0].ref.get()
                      doc_ = {
                        id: doc_.id,
                        path: doc_.ref.path,
                        data: doc_.data()
                      }
                       // debugger
                        __.required_services[doc.id].push(doc_)
                      console.log("this?", this.required_services[doc.id], '__??', __.required_services)
                      docs_.push(doc_)
                    }
                  })
              }
              console.log('__docs__', docs_)

              return docs_
            }).catch(err => console.error(err))

            // console.log('this.required_services', this.required_services)
          }



        }
        // console.log('object entries', Object.entries(result))
        // console.log('__this.required_services__', Object.entries(this.required_services))
        // sessionStorage.setItem('required_services', JSON.stringify(this.required_services))
        return result

      }

预期结果是在Firebase响应到来之后更新数据功能属性，但没有更新发生。

如果有人对可能发生的事情有任何线索...有人告诉我，异步功能可能会引起问题...但是我想他们别无选择...

Answer 1

此行

_.required_services[doc.id] = []

没有反应。请参阅the docs

中的第一点

Answer 2

因此，正如@StephenThomas所指出的，反应性属性使用中的数组更改检测功能存在一些限制。因此，从Firebase加载内容后，请尝试像this.joblist.push(doc)那样推送内容，vue属性将无法正确反应，并让不知道这种限制的人的脑海有些混乱（{ {3}}）... 通过使用此行，现在可以查看Vue开发工具内部的属性更改

_.joblist.splice(0,0, local_doc)

感谢@SthephenThomas，指出了这一点！

异步数据获取未更新反应性数据属性

2 个答案: