0

Ok, guys, I´m having a little issue today, all day long, trying to solve, the deal goes like this...

I´m fetching some data from firebase to render on the html template with asynchronous functions

I have a fetchList Method that is like this:

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

      }

line of code responsible for the console output

the actual console output

not updating the component properties

The expected result would be for the data function properties to be update after the firebase response came, but no update is happening.

If anyone, have any clues, of what could be happening... some people told me that asynchrounous functions could cause problems... but there is no alternative for them, I guess...

2
  • what does you initialization of required_services look like in your data property Commented Jan 31, 2019 at 23:51
  • Hi @Ohgodwhy, this is my data function data() { return { required_services: [], // joblist: [], list: [], user: this.logged_user, required_services_saved:false, } }, Does this make sense? Commented Feb 1, 2019 at 2:09

2 Answers 2

1

This line

_.required_services[doc.id] = []

is not reactive. See the first point in the docs

Sign up to request clarification or add additional context in comments.

3 Comments

Hi @StephenThomas, so let me know if I got this straight... this line __.required_services[doc.id].push(doc_) would become something like this __.set(__.required_services, [doc.id], doc_ ).. am I right ???
Hi @StephenThomas,so I´m trying to use like this _.$set(_.required_services, [doc.id], doc_ ) ... but I would like to push inside the same key and nest the documents under that key... how could I do that?
Hi @StephenThomas,... ok.. like this if(!_.required_services[doc.id]){_.$set(_.required_services, [doc.id], [])} _.required_services[doc.id].push(doc_) ... make sense?? ... so I would like to nest like this, but still not reactive
0

So as pointed by @StephenThomas, there is some limitations in array change detection capabilities in reactive property usage. So after loading the content from firebase, try to push it like this.joblist.push(doc) vue property will not react properly and make some confusion in the head of someone that doesn´t know about this limitation in detecting this kind of array mutation (https://v2.vuejs.org/v2/guide/list.html#Caveats)... By using this line, now is possible to see the changes in property inside the Vue dev tools

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

Thanks @SthephenThomas, for pointing this out!!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.