From 2a9a6a89077712bb8bd28f336a9898280fd7883d Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 14:11:17 +0200
Subject: [PATCH] rewrite the assignment to composition API

---
 .../src/App.vue                               | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/2021-09-04_composition-assignment-2-problem/src/App.vue b/2021-09-04_composition-assignment-2-problem/src/App.vue
index 53ea710..9b2410e 100644
--- a/2021-09-04_composition-assignment-2-problem/src/App.vue
+++ b/2021-09-04_composition-assignment-2-problem/src/App.vue
@@ -3,10 +3,10 @@
     <h1>Expense Tracker</h1>
   </header>
   <section>
-    <div>Available Funds: {{ availableFunds }}</div>
-    <div>Total Expenses: {{ currentExpenses }}</div>
+    <div>Available Funds: {{ data.availableFunds }}</div>
+    <div>Total Expenses: {{ data.currentExpenses }}</div>
     <hr />
-    <div>Funds left: {{ remainingFunds }}</div>
+    <div>Funds left: {{ data.remainingFunds }}</div>
   </section>
   <section>
     <form @submit.prevent="addExpense">
@@ -20,31 +20,38 @@
 </template>
 
 <script>
+import { ref, reactive, computed, watch } from 'vue';
+
 export default {
-  data() {
-    return {
+  setup() {
+    const data = reactive({
       availableFunds: 100,
       currentExpenses: 0,
-      enteredExpense: 0,
-    };
-  },
-  computed: {
-    remainingFunds() {
-      return this.availableFunds - this.currentExpenses;
-    },
-  },
-  methods: {
-    addExpense() {
-      this.currentExpenses += this.enteredExpense;
-    },
-  },
-  watch: {
-    remainingFunds(val) {
-      if (val < 0) {
+      enteredExpense: 0
+    });
+
+    const enteredExpense = ref(0);
+
+    data.remainingFunds = computed(function() {
+      return data.availableFunds - data.currentExpenses;
+    });
+
+    function addExpense() {
+      data.currentExpenses += enteredExpense.value;
+    }
+
+    watch(data, function(_, newValue) {
+      if (newValue.remainingFunds < 0) {
         alert('You are broke!');
       }
-    },
-  },
+    });
+
+    return {
+      data,
+      addExpense,
+      enteredExpense
+    };
+  }
 };
 </script>
 
@@ -99,4 +106,4 @@ button:active {
   background-color: #5819ac;
   border-color: #5819ac;
 }
-</style>
\ No newline at end of file
+</style>