CODEWITHSUNDEEP
firebasevue.jsvuejs2google-cloud-firestore
Adrian Caballero
Adrian Caballero

Reputation: 3

Fetching one document from firebase (Vue)

I'm trying to fetch a specific document from firebase, based on my route params (id) where I'm using the auto-generated firebase ID to retrieve the document.

However, nothing no data is being returned.

Using the when() method, I would like to retrieve a specific document with an auto-generated ID that matches my query...I'm using ("id", "==", $this.route.params.id)... is "id" the right syntax when referring to the auto-generated ID?

Here is a screenshot of the simple database I have set up...

I'm going to manipulate UI later, for now, I simply have this in the template... 

<template>
 <div>
  <h1>{{ huddle.goal }}</h1>
  <h1>{{ huddle.headline }}</h1>
  <h1>{{ huddle.body }}</h1>
 </div>
</template>

and then I have this in my script...

<script>
import db from "./firebaseInit"
export default {
  name: "HuddleSpace",
  data() {
    return {
      id: this.$route.params,
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    "$route": "fetchData"
  },
  methods: {  
    fetchData() {
      db.collection("huddle").where("id", "==", 
       this.$route.params.id).get().then(querySnapshot => {
        querySnapshot.forEach(doc => {
         const huddle = {
            goal: doc.data().goal,
            headline: doc.data().headline,
            body: doc.data().body
          }
        })
      })
    }
  },
}
</script>

I'm going off of the Vue Router docs for "data fetching after navigation" / firebase docs for getting data / a few videos on youtube, so I'm not sure that the logic makes sense.

Upvotes: 0

Views: 2076

Answers (2)

Renaud Tarnec
Renaud Tarnec

Reputation: 83093

Your problem comes from the fact that your huddle object is not included in the data object and therefore it is not added to "Vue’s reactivity system". See https://v2.vuejs.org/v2/guide/instance.html#Data-and-Methods for more detail.

You should do as follows:

<script>
import db from "./firebaseInit"
export default {
  name: "HuddleSpace",
  data() {
    return {
      id: this.$route.params.id,
      huddle: {}
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    "$route": "fetchData"
  },
  methods: {  
    fetchData() {
      db.collection("huddle").where("id", "==", 
       this.$route.params.id).get().then(querySnapshot => {
        querySnapshot.forEach(doc => {
         this.huddle = {
            goal: doc.data().goal,
            headline: doc.data().headline,
            body: doc.data().body
          }
        })
      })
    }
  },
}
</script>

Upvotes: 0

abed_hamada
abed_hamada

Reputation: 26

You do not need to make a query, The id you deal with is the document id, so to get it use =>

db.collection('huddle').doc(this.$route.params.id)
.get().then(snapshot => {
    if (!snapshot.exists) return;
    let data = snapshot.data() // 
    // continue your code
});

// where("id", "==", this.$route.params.id) =>This make a query to get documents which have field name (id) with specified value ($this.route.params.id)

Upvotes: 1

Related Questions