Break display of game details out into its own subcomponent.

woodcoder · woodcoder · commit 8bd5681978ae · 2016-10-04T11:10:39.000+01:00
diff --git a/src/BoardGame.vue b/src/BoardGame.vue
@@ -0,0 +1,20 @@
+<template>
+  <li>
+    <span :class="icon"></span>
+    {{ name }}
+  </li>
+</template>
+
+<script>
+module.exports = {
+  props: [
+    'name',
+    'type'
+  ],
+  computed: {
+    icon: function () {
+      return 'icon-' + this.type
+    }
+  }
+}
+</script>
diff --git a/src/BoardLibrary.vue b/src/BoardLibrary.vue
@@ -8,15 +8,14 @@
     <button @click="addGame">Add</button>
     <p v-if="empty">Zarro Boords!</p>
     <ul v-else>
-      <li v-for="g in games">
-        <span :class="icon(g.type)"></span>
-        {{ g.game }}
-      </li>
+      <board-game v-for="g in games" :type="g.type" :name="g.game"></board-game>
     </ul>
   </div>
 </template>
 
 <script>
+var BoardGame = require('./BoardGame.vue')
+
 module.exports = {
   data: function() {
     return {
@@ -36,10 +35,10 @@ module.exports = {
         game: this.game,
         type: this.type
       })
-    },
-    icon: function (type) {
-      return 'icon-' + type
     }
+  },
+  components: {
+    BoardGame: BoardGame
   }
 }
-</script>
+</script>
