How to tell vuefire's firestore to execute after "created" hook?

I am using vuefire for my new Vue.js project. But there is a problem with initialization...

One of my data property need to be intialized via a method. To do this, I use the created hook of Vue.js. Actually I need the value of this property for my firestore request.

Problem is : the firestore request seems to run before the created hook.

How can I run my firestore requests after the created hook as been run ?

Thank !

data: function () {
  return {
    currentWeek: null
  }
},
firestore: function (currentWeek) {
  return {
    slots: db.collection('slots').where('start', '>=', this.currentWeek)
  }
},
created: function () {
  this.currentWeek = moment().startOf('week')
},

2 answers

  • answered 2018-10-12 03:41 Aaron Saunders

    this is not the exact code but, basically you want to use the $firestoreRefs to make the query yourself inside of the created lifecycle method

    data: function () {
      return {
        currentWeek: null,
        slots : []
      }
    },
    created: function () {
      this.currentWeek = moment().startOf('week')
      this.slots = this.$firestoreRefs['slots'].where('start', '>=', this.currentWeek)
    },
    

  • answered 2018-10-12 16:40 Anthony Granger

    I found that I can solve this issue with watch and binding :

    data: function () {
      return {
        currentWeek: null,
        slots: []
      }
    },
    created: function () {
      this.currentWeek = moment().startOf('week')
    },
    watch: {
      currentWeek (currentWeek) {
        this.$bind('slots', db.collection('slots')
          .where('start', '>=', moment(currentWeek).toDate())
      }
    }
    

    I am pretty sure a better solution can be found...