addBark.vue

<template>
    <div class="motherfont" id="add-bark">
        <h2>Compose a Bark</h2>
        <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>
</template>

<script>
// Imports
export default {
    data () {
        return {
            bark: {
                content: '',
            },
            submitted: false
        }
    },
    methods: {
    post(){
        db.collection('barks').add({
          user: this.$store.state.user, // object with: { uid, displayName, photoURL, email, phoneNumber }
          content:this.bark.content,
          createdAt: new Date()
    
        })
        this.content=null;
        // Update the list
        this.display();
    }
    }
}
      
    //     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;
}