Home.vue

<template>
    <div class="motherfont">
        <h2>Compose a Bark</h2>
        <input type="text" v-model="search" placeholder="search barks"/>
         <b-list-group-item class="d-flex align-items-center">
        <b-avatar variant="info" :src="this.$store.state.user.photoURL" class="mr-3"></b-avatar>
        <span class="mr-auto">
             <form  v-if="!submitted">
                <textarea type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
                <button @click.prevent="post" once>Add Bark</button>
            </form></span>
      </b-list-group-item>
        <b-list-group-item class="d-flex align-items-center" v-for="(bark, index) in filteredallBarks" :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>
</template>

<script>
// Imports
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');;
    
    },


    post(){
        
        let newBark = {
          user: this.$store.state.user, // object with: { uid, displayName, photoURL, email, phoneNumber }
          content:this.bark.content,
          createdAt: new Date()
        };

        db.collection('barks').add(newBark)
        this.content=null;


        this.allBarks.unshift(newBark);
        // Update the list
        //this.display();
    },
        getBarks(){
            db.collection("barks").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.getBarks();

      
    },
    computed: {
        filteredallBarks: function(){
            return this.allBarks.filter((bark) => {
                return bark.content.match(this.search)
                
            });
        }
    }
}
      
    //     post: function(){
    //         this.$http.post('https://dmd4470-50f92.firebaseio.com/tweets.json',this.bark).then(function(data){
    //             console.log(data);
    //             this.submitted = true;
    //         });
    //     }
    // }
</script>

<style scoped>

label{
    display: block;
    margin: 20px 0 10px;
}
input[type="text"], textarea{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 15px;
        outline: 0px;
        padding: 10px 20px;
}
textarea{
    width: 500px;
}