Refactor to use computed properties and methods.

woodcoder · woodcoder · commit 1a46dd1ba7da · 2016-10-04T08:35:37.000+01:00
diff --git a/index.html b/index.html
@@ -8,15 +8,15 @@
   <body>
     <div id="app">
       <select v-model="type">
-        <option value="icon-dice">Board Game</option>
-        <option value="icon-spades">Card Game</option>
+        <option value="dice">Board Game</option>
+        <option value="spades">Card Game</option>
       </select>
-      <input v-model="game">
-      <button @click="games.push({game: game, type: type})">Add</button>
-      <p v-if="games.length == 0">Zarro Boords!</p>
+      <input v-model="game" @keyup.enter="addGame">
+      <button @click="addGame">Add</button>
+      <p v-if="empty">Zarro Boords!</p>
       <ul v-else>
         <li v-for="g in games">
-          <span :class="g.type"></span>
+          <span :class="icon(g.type)"></span>
           {{ g.game }}
         </li>
       </ul>
@@ -27,8 +27,24 @@
         el: '#app',
         data: {
           game: '',
-          type: 'icon-dice',
+          type: 'dice',
           games: []
+        },
+        computed: {
+          empty: function() {
+            return this.games.length == 0
+          }
+        },
+        methods: {
+          addGame: function () {
+            this.games.push({
+              game: this.game,
+              type: this.type
+            })
+          },
+          icon: function (type) {
+            return 'icon-' + type
+          }
         }
       })
     </script>
