Split out the new game functionality into a subcomponent.

woodcoder · woodcoder · commit 307139406065 · 2016-10-04T11:15:40.000+01:00
diff --git a/src/BoardAdd.vue b/src/BoardAdd.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <select v-model="type">
+      <option value="dice">Board Game</option>
+      <option value="spades">Card Game</option>
+    </select>
+    <input v-model="name" @keyup.enter="add">
+    <button @click="add">Add</button>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function() {
+    return {
+      name: '',
+      type: 'dice',
+    }
+  },
+  methods: {
+    add: function () {
+      this.$emit('add', {
+        name: this.name,
+        type: this.type
+      })
+    }
+  }
+}
+</script>
diff --git a/src/BoardLibrary.vue b/src/BoardLibrary.vue
@@ -1,26 +1,20 @@
 <template>
   <div>
-    <select v-model="type">
-      <option value="dice">Board Game</option>
-      <option value="spades">Card Game</option>
-    </select>
-    <input v-model="game" @keyup.enter="addGame">
-    <button @click="addGame">Add</button>
+    <board-add @add="handleAdd"></board-add>
     <p v-if="empty">Zarro Boords!</p>
     <ul v-else>
-      <board-game v-for="g in games" :type="g.type" :name="g.game"></board-game>
+      <board-game v-for="game in games" :type="game.type" :name="game.name"></board-game>
     </ul>
   </div>
 </template>
 
 <script>
+var BoardAdd = require('./BoardAdd.vue')
 var BoardGame = require('./BoardGame.vue')
 
 module.exports = {
   data: function() {
     return {
-      game: '',
-      type: 'dice',
       games: []
     }
   },
@@ -30,14 +24,12 @@ module.exports = {
     }
   },
   methods: {
-    addGame: function () {
-      this.games.push({
-        game: this.game,
-        type: this.type
-      })
+    handleAdd: function (game) {
+      this.games.push(game)
     }
   },
   components: {
+    BoardAdd: BoardAdd,
     BoardGame: BoardGame
   }
 }
