Complete module5

src/components/BookForm.vue

@@ -0,0 +1,29 @@
+<template>
+ <form v-on:submit.prevent="bookSubmit(bookTitle, bookAuthor)" class="" action="#" method="post">
+ <input type="text" name="title" value="" placeholder="Book Title" v-model="bookTitle">
+ <input type="text" name="author" value="" placeholder="Book Author" v-model="bookAuthor">
+ <button type="submit" name="button">Add Book</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 scoped>
+
+</style>

src/components/BookList.vue

@@ -4,15 +4,18 @@
  <ul>
  <book-item v-for="book in books" :book="book"></book-item>
  </ul>
+
+ <book-form @addBook="appendBook"></book-form>
  </div>
 </template>
 
 <script>
  import BookItem from './BookItem';
+ import BookForm from './BookForm';
 
  export default {
  name: "BookList",
- components: { BookItem },
+ components: { BookItem, BookForm },
  data() {
  return {
  title: "All Books",
@@ -23,6 +26,11 @@
  ]
  }
  },
+ methods: {
+ appendBook(bookTitle, bookAuthor) {
+ this.books.push({ title: bookTitle, author: bookAuthor });
+ }
+ }
  }
 </script>