vue.js - 异步数据获取不更新反应数据属性

问题描述

好吧，伙计们，我今天有一个小问题，整天都在试图解决，交易是这样的......

我正在从 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 响应到来后更新数据函数属性，但没有发生更新。

如果有人，有任何线索，可能会发生什么......有些人告诉我异步函数可能会导致问题......但我想他们别无选择......

标签： vue.jsasync.js

vue.js - 异步数据获取不更新反应数据属性

问题描述

解决方案

推荐阅读