title: How to get data from firebase when page loading using vuejs?
body: <p>I have been trying to get current user data from firebase to display details in profile page. </p>
  
  <p>Here i am trying get data from firestore, when page loading. My table structure : users => Current user UID => email, firstname, lastname, businessname, etc.</p>
  
  <p>I have added functionality to get data from firebase when profile page loading but does not work. error showing in console product.data().firstname is not function.</p>
  
  <p>And also i did not get any console output firebase data retrieved or not?</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;template&gt;
  &lt;section class="what-we-do"&gt;
  &lt;div class="container-2" style="padding-top: 150px;"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="saving-process-crd"&gt;
              &lt;div class="saving-process-inner"&gt;
  
                    &lt;avatar :fullname="currentUser.email" size="96" &gt;
                    &lt;/avatar&gt;
                    &lt;h4&gt;Siva NSN&lt;/h4&gt;
                    &lt;h6 style="color:grey;"&gt;{{currentUser.email}}&lt;/h6&gt;&lt;br&gt;&lt;br&gt;
  
                    &lt;div class="card-columns" &gt;
                      &lt;div class="card" style="border: none; text-align: justify;"&gt;
                        &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title"&gt;First Name:&lt;/h5&gt;&lt;br&gt;
                          &lt;h5 class="card-title"&gt;Last Name:&lt;/h5&gt;&lt;br&gt;
                          &lt;h5 class="card-title"&gt;Email ID:&lt;/h5&gt;&lt;br&gt;
  
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="card" style="border: none;"&gt;
                        &lt;div class="card-body" style="float: left; text-align: left;" &gt;
                          &lt;h5 class="card-title"&gt;{{product.data().firstname}}&lt;/h5&gt;&lt;br&gt;
                          &lt;h5 class="card-title"&gt;Mobility&lt;/h5&gt;&lt;br&gt;
                          &lt;h5 class="card-title"&gt;{{currentUser.email}}&lt;/h5&gt;&lt;br&gt;
  
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
  &lt;/section&gt;
  
  
   &lt;/template&gt;
   &lt;script&gt;
  
  import Avatar from 'vue-avatar-component'
  import database from '@/database'
  import firebase from 'firebase/app'
  
  
  export default {
    name: 'Profile',
  
  computed:{
  currentUser (){
  
    return this.$store.state.currentUser
  }
  },
  
  components: { 
  
  Avatar
  
   },
   data () {
  
      return {
  
        profileData:{
          email:null,
          firstname:null,
          lastname:null,
          secondaryEmail:null,
          businessName:null
         }
      }
  
  
  },
  
  methods:{
  
  readData(){
  
        const firestore = database.firestore();
     firestore.collection('users').doc(firebase.auth().currentUser.uid).
    onSnapshot(function(doc){
  
          console.log('current data:', doc.data())
  
            var newData = doc.data()
  
          this.profileData.push(newData)
  
        })
  
   }
  
  }
  
  
  
  
  
     }
     &lt;/script&gt;
  </code></pre>
  
  <p>main.js code:</p>
  
  <p>here i am i have user authstatechanges of current user.</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  
   import router from './router';
  
   import 'bootstrap';
  </code></pre>
  
  <p>import 'bootstrap/dist/css/bootstrap.min.css';
      import './assets/styles//base-style.css';</p>
  
  <pre><code>import store from '@/store'
  import firebase from 'firebase/app'
  import 'firebase/auth'
  import 'firebase/firestore'
  
  Vue.config.productionTip = false
  
  
  let app
  
  const initialize = () =&gt; {
  
  if (!app) {
  
  app = new Vue({
  el: '#app',
  router,
  store,
  render: h =&gt; h(App),
  
  
   })
  }
  
  }
  
   firebase.auth().onAuthStateChanged(user =&gt; {
  
   if(user) {
  
   store.commit('setCurrentUser', user)
   } else {
   store.commit('setCurrentUser', null)
   }
  
   initialize()
  
   })
  </code></pre>
  
  <p>console output: <a href="https://i.stack.imgur.com/Vd9k7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vd9k7.png" alt="enter image description here"></a></p>
  
  <p>How to get data when page loading from firebase database. any help much appreicated pls..</p>