Profile.vue

<template>
  <div class="Pofile">
    <span class="motherfont"> <h1>Profile</h1>
    <h2 >Your Barks <i>stay</i> here.</h2>
    </span>
    <img src="/assets/barkbutton.png" alt="" width="25px">
     <div class="motherfont">
        <b-list-group-item class="d-flex align-items-center" v-for="(bark, index) in allBarks" :key=index>
        <b-avatar  :src="bark.user.photoURL" class="mr-3"></b-avatar>
        <div class="mr-auto"> <p display="inline" > {{ bark.user.displayName }} | {{ formatDate (bark.createdAt.toDate()) }}</p>
            </div>
            <br>
        <div>  
            <p>{{ bark.content }}</p>
        </div>
      </b-list-group-item>
    
       
    </div>

  </div>
  
</template>
<script>

import moment from 'moment';
export default {
    data: function() {
        return {
            bark: {
                content: '', 
            },
            allBarks: [],
            search: '',
            submitted: false
        }
    },
    methods: {
      formatDate(myDate){
        return moment(myDate).format('MMMM Do YYYY, h:mm:ss a');;
    
    },
  
        getBarks2(){
          //let poweruser = this.$store.state.user
           db.collection("barks").where("user", "==",this.$store.state.user )
            .get().then(querySnapshot => {
            querySnapshot.forEach(doc => {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
                this.allBarks.push(doc.data())
            });
        });

        }
    },
    mounted(){
        this.getBarks2();

      
    },
   
}

</script>