CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-platformgoogle-cloud-firestore
Axiol
Axiol

Reputation: 5962

Get data from Firebase in Vue.js component

I'm starting my first serious app with Vue.js and I have an issue gathering data from Firabase. The idea here is simply to get data linked to an user ID. My first though was to store that in a computed value, like so

export default {

  ...

  computed: {
    userInfo: function() {
      const firestore = firebase.firestore();
      const docPath = firestore.doc('/users/' + firebase.auth().currentUser.uid);

      docPath.get().then((doc) => {
        if (doc && doc.exists) {
          return doc.data();
        }
      });
    }
  }
}

But, when I try to access this variable, it's undifined.

My guess is that the value is computed before the asynchronous call has ended. But I can't see how to get around it.

Upvotes: 1

Views: 851

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83058

Indeed you have to take into account the asynchronous character of the get() method. One classical way is to query the database in the created hook, as follows (Vue.js 2):

export default {

  data() {
    return {
      userInfo: null,
    };
  },

  ....
 
  created() {
      const firestore = firebase.firestore();
      const docPath = firestore.doc('/users/' + firebase.auth().currentUser.uid);

      docPath.get().then((doc) => {
        if (doc && doc.exists) {
          this.userInfo = doc.data();
        }
      });
  }

}

Upvotes: 1

Related Questions