Home.vue

<template>
    <div class="motherfont">
        <h2>Compose a Bark</h2>
       
         <img alt="Bark Action" src="../assets/dog.png" width="200px">

        <form v-if="!submitted">
            <input type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
            <button @click.prevent="post" once>Add Bark</button>
        </form>
        <div v-if="submitted">
            <h3>Thanks for adding your post</h3>
        </div>
        <div>
                 <ul>
                 <li v-for="(bark, index) in allBarks" :key=index>
                    {{ bark.content }} by {{ bark.user.displayName }}
                </li>
                </ul>
        </div>
    </div>
</template>

<script>
// Imports
export default {
    data () {
        return {
            bark: {
                content: '',
            },
            allBarks: [],
            submitted: false
        }
    },
    methods: {
    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();


    }
}
      
    //     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>
#add-blog *{
    box-sizing: border-box;
}
#add-blog{
    margin: 20px auto;
    max-width: 500px;
}
label{
    display: block;
    margin: 20px 0 10px;
}
input[type="text"], textarea{
    display: block;
    width: 100%;
    padding: 8px;
}