From 6d1f81d23add8ae071ee197e46820ee2dffac300 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Sat, 4 Sep 2021 11:57:57 +0200
Subject: [PATCH] solve the task with a ref object

---
 .../src/App.vue                               | 19 ++++++++++++++-----
 1 file changed, 14 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 b704868..3ec6604 100644
--- a/2021-09-04_composition-assignment-1-problem/src/App.vue
+++ b/2021-09-04_composition-assignment-1-problem/src/App.vue
@@ -2,7 +2,7 @@
   <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 v-if="showGoal">{{ courseGoal }}</h3>
+  <h3 v-if="Goal.visibility">{{ courseGoal }}</h3>
   <!-- Task 2: Toggle (show/ hide) the goal with help of the button  -->
   <button @click="toggleGoal">Toggle Goal</button>
   <!-- Task 3: Manage data in three ways -->
@@ -18,16 +18,25 @@ import { ref } from 'vue';
 export default {
   setup() {
     const courseGoal = 'Something is written here';
-    const showGoal = ref(false);
+    //const showGoal = ref(false);
+    const Goal = ref({
+      visibility: false
+    });
 
+    // ref way
+    //function toggleGoal() {
+    //  showGoal.value = !showGoal.value;
+    //  console.log(showGoal.value);
+    //}
+
+    // ref object way
     function toggleGoal() {
-      showGoal.value = !showGoal.value;
-      console.log(showGoal.value);
+      Goal.value.visibility = !Goal.value.visibility;
     }
 
     return {
       courseGoal,
-      showGoal,
+      Goal,
       toggleGoal
     };
   }