counter app

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

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