0

I am trying to display a value stored in Firestore.

<p class="font-semibold">{{ user_displayName }}</p


export default {
   name: "the-navbar",
data() {
return {
name:''
}
},
computed:{
user_displayName() {

           const u = firebase.auth().currentUser;


           firebase
           .firestore()
           .collection('Colleges')
           .doc(u.uid)
           .onSnapshot(function(doc) {

             this.name=doc.data().displayName
             console.log(this.name)

            });
           console.log(this.name)

           return this.name
       },
}

No value or error is being returned and only first console.log is displaying the data (name).

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
mayank3503
  • 315
  • 4
  • 17
  • that is different and does not solves the issue – mayank3503 Sep 11 '19 at 10:45
  • Data is loaded from Firestore asynchronously. By the time your `return this.name` statement runs, your `this.name=doc.data().displayName` hasn't run yet. If you run the code in a debugger and set some breakpoint you can easily see this, and learn the flow of such asynchronous APIs. The question Denis linked shows the same problem, as does an answer that I just wrote here: https://stackoverflow.com/questions/57887418/assigining-data-from-firestore-get-to-a-variable/57891552#57891552 – Frank van Puffelen Sep 11 '19 at 14:46

0 Answers0