add remote calls

Author: Hampton Paulk

src/components/BookForm.vue

@@ -10,17 +10,17 @@
 export default {
   name: 'BookForm',
   props: ['books'],
-  data () {
+  data() {
     return {
       bookTitle: '',
       bookAuthor: '',
-    }
+    };
   },
   methods: {
-      bookSubmit (bookTitle, bookAuthor){
-        this.$emit('addBook', bookTitle, bookAuthor)
-      }
+    bookSubmit(bookTitle, bookAuthor) {
+      this.$emit('addBook', bookTitle, bookAuthor);
     },
+  },
 };
 </script>
 

src/components/BookList.vue

@@ -4,14 +4,14 @@
     <ul>
       <book-item
         v-for='book in books'
-        :key='book'
+        :key='book.id'
         :book='book'
       ></book-item>
     </ul>
     <br>
     <book-form @addBook='appendBook'></book-form>
     <br><hr>
-    <book-suggestions></book-suggestions>
+    <book-suggestions @appendBook='appendBook'></book-suggestions>
   </div>
 </template>
 
@@ -40,9 +40,9 @@ export default {
   },
   methods: {
     appendBook(bookTitle, bookAuthor) {
-      this.books.push({title: bookTitle, author: bookAuthor})
-    }
-  }
+      this.books.push({ title: bookTitle, author: bookAuthor });
+    },
+  },
 };
 </script>
 

src/components/BookSuggestion.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>{{book.title}} : {{book.author}}</li>
+  <li @click="$emit('add-suggestion', book.title, book.author)">{{book.title}} : {{book.author}}</li>
 </template>
 
 <script>

src/components/BookSuggestions.vue

@@ -4,8 +4,9 @@
     <ul>
         <book-suggestion 
           v-for="suggestion in suggestions"
-          :key='suggestion'
+          :key='suggestion.id'
           :book='suggestion'
+          @add-suggestion='appendSuggestion'
           ></book-suggestion>
     </ul>
   </div>
@@ -18,12 +19,12 @@ import BookSuggestion from './BookSuggestion';
 export default {
   name: 'BookSuggestions',
   components: {
-    BookSuggestion
+    BookSuggestion,
   },
   data() {
     return {
       suggestions: [],
-    }
+    };
   },
   methods: {
     fetchSuggestions() {
@@ -36,10 +37,12 @@ export default {
     },
     buildTopBooks(books) {
       books.forEach(({ title, author }) => {
-        console.log(title, author);
-        this.suggestions.push({ title: title, author: author });
+        this.suggestions.push({ title, author });
       });
     },
+    appendSuggestion(title, author) {
+      this.$emit('appendBook', title, author);
+    },
   },
   beforeMount() {
     this.fetchSuggestions();