gdg-tangier / vue-firestore

:cloud: Cloud Firestore binding in realtime with Vuejs
MIT License
235 stars 28 forks source link

this.$firestore.array.add is not a function #26

Closed jayolin closed 6 years ago

jayolin commented 6 years ago

So I'm manually binding to a "feeds" array like this:

mounted(){

      this.$binding("feeds", firestore.collection('posts')
        .where('followers.8v0RIxTPxX7wCttiREdF', '==', true)
        .orderBy('created_at', 'desc')
        .endAt(Date.now()-(60*5*60*1000))).then((feeds) => {

          console.log(feeds)

      })

},

The problem is that when I try to add a new item to the database, i get the above error. This is the method to add a new feed:

addPerson(){

    this.$firestore.feeds.add({
      userId: "8v0RIxTPxX7wCttiREdF",
      caption: "Stuff yeah",
      created_at: Date.now(),
      followers:{
        "8v0RIxTPxX7wCttiREdF":true
      }
    })
  },

} It always yields a "vue.esm.js?65d7:1743 TypeError: this.$firestore.feeds.add is not a function at VueComponent.addPerson (firebase-component.vue?e36e:201) at click (firebase-component.vue?6199:67) at VueComponent.invoker (vue.esm.js?65d7:2029) at VueComponent.Vue.$emit (vue.esm.js?65d7:2540) at VueComponent.click (vuetify.js?e0ae:7237) at invoker (vue.esm.js?65d7:2029) at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?65d7:1828)"

amranidev commented 6 years ago

Thank you!

amranidev commented 6 years ago

This is happening because there are some changes in firebase API, make sure to update your project to the latest release. Firebase release notes.

jayolin commented 6 years ago

I upgraded my project's firebase to the latest, even tried installing vue-firestore again but the problem still persists

amranidev commented 6 years ago

@jayolin yeah I see.

the issue is that you're adding a new record through a given query,

I suggest that you add another ref to your app,


      this.$binding("feeds", firestore.collection('posts')
        .where('followers.8v0RIxTPxX7wCttiREdF', '==', true)
        .orderBy('created_at', 'desc')
        .endAt(Date.now()-(60*5*60*1000))).then((feeds) => {
          console.log(feeds)
      })

      // bind feedSource as original
      this.$binding("feedSource", firestore.collection('posts').then((feeds) => {
          console.log(feeds)
      })

Then you can add a new record to your feeds via feedSource.

    this.$firestore.feedSource.add({
      userId: "8v0RIxTPxX7wCttiREdF",
      caption: "Stuff yeah",
      created_at: Date.now(),
      followers:{
        "8v0RIxTPxX7wCttiREdF":true
      }
    })

I don't know if that does make sense to you, but please let me know!

Thanks for opening this issue, I really appreciate that.

jayolin commented 6 years ago

@amranidev , awesome!! It works now. Thanks a bunch!