Creating a BookForm Component

Author: apassiondev

src/components/BookForm.vue

@@ -0,0 +1,29 @@
+<template>
+  <form method="post" action="#" v-on:submit.prevent="bookSubmit(bookTitle, bookAuthor)">
+    <input v-model="bookTitle" type="text" name="title" value="" placeholder="Book Title" />
+    <input v-model="bookAuthor" type="text" name="title" value="" placeholder="Book Author" />
+    <button type="submit" name="button">Save</button>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'BookForm',
+  props: ['books'],
+  data () {
+    return {
+      bookTitle: '',
+      bookAuthor: ''
+    }
+  },
+  methods: {
+    bookSubmit(bookTitle, bookAuthor){
+      this.$emit('addBook', bookTitle, bookAuthor);
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/BookList.vue

@@ -4,15 +4,20 @@
     <ul>
         <book-item v-for="book in books" :book='book'></book-item>
     </ul>
+    <hr>
+    <book-form @addBook='appendBook'></book-form>
   </div>
 </template>
 
 <script>
 import BookItem from './BookItem';
+import BookForm from './BookForm';
+
 export default {
   name: "BookList",
   components: {
-    BookItem
+    BookItem,
+    BookForm
   },
   data() {
     return {
@@ -23,6 +28,14 @@ export default {
         { title: "Amusing Ourselves to Death", author: "Neil Postman" }
       ]
     };
+  },
+  methods : {
+    appendBook(bookTitle, bookAuthor){
+      this.books.push({
+        title: bookTitle,
+        author: bookAuthor
+      });
+    }
   }
 };
 </script>