basics-2 counter

02-basics-2/10-counter/CounterApp.js

@@ -1,25 +1,48 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'CounterApp',
 
-  setup() {},
+  setup() {
+    const counter = ref(0);
+
+    function onClickDecrement() {
+      counter.value--;
+    }
+
+
+    function onClickIncrement() {
+      counter.value++;
+    }
+
+
+    return {
+      counter,
+      onClickDecrement,
+      onClickIncrement,
+    }
+  },
 
   template: `
     <div class="counter">
       <button
         class="button button--secondary"
         type="button"
         aria-label="Decrement"
-        disabled
+        :disabled="counter === 0"
+        @click="onClickDecrement"
       >➖</button>
 
-      <span class="count" data-testid="count">0</span>
+      <span class="count" data-testid="count">
+        {{ counter }}
+       </span>
 
       <button
         class="button button--secondary"
         type="button"
         aria-label="Increment"
+        :disabled="counter === 5"
+        @click="onClickIncrement"
       >➕</button>
     </div>
   `,