From 148ea7aa8edc463349d6e162df63f19f24e30c7c Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 11:53:07 +0200
Subject: [PATCH] implement the task with ref

---
 .../src/App.vue                               | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/2021-09-04_composition-assignment-1-problem/src/App.vue b/2021-09-04_composition-assignment-1-problem/src/App.vue
index 309e0a2..b704868 100644
--- a/2021-09-04_composition-assignment-1-problem/src/App.vue
+++ b/2021-09-04_composition-assignment-1-problem/src/App.vue
@@ -2,9 +2,9 @@
   <h2>My Course Goal</h2>
   <!-- Task 1: Output your main course goal with help of the composition API -->
   <!-- Don't hardcode it into the template, instead hardcode it into the JS code -->
-  <h3>OUTPUT COURSE GOAL</h3>
+  <h3 v-if="showGoal">{{ courseGoal }}</h3>
   <!-- Task 2: Toggle (show/ hide) the goal with help of the button  -->
-  <button>Toggle Goal</button>
+  <button @click="toggleGoal">Toggle Goal</button>
   <!-- Task 3: Manage data in three ways -->
   <!-- => Separate refs -->
   <!-- => Ref Object -->
@@ -13,9 +13,25 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
-  
-}
+  setup() {
+    const courseGoal = 'Something is written here';
+    const showGoal = ref(false);
+
+    function toggleGoal() {
+      showGoal.value = !showGoal.value;
+      console.log(showGoal.value);
+    }
+
+    return {
+      courseGoal,
+      showGoal,
+      toggleGoal
+    };
+  }
+};
 </script>
 
 <style>
@@ -26,4 +42,4 @@ body {
   margin: 3rem;
   text-align: center;
 }
-</style>
\ No newline at end of file
+</style>