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

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 属性将不会做出正确反应，并在不了解检测此类限制的人的头脑中造成一些混乱数组突变（https://vuejs.org/v2/guide/list.html#Caveats）... 通过使用这一行，现在可以在 Vue 开发工具

中看到属性的变化

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

感谢@SthephenThomas 指出这一点！！

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

Async data fetching not updating reactive data property

async.js

vue.js

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

Async data fetching not updating reactive data property

async.js

vue.js

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