vuejs_course/2021-09-04_composition-assignment-1-problem/src/App.vue

<template>
  <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="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 -->
  <!-- => Separate refs -->
  <!-- => Ref Object -->
  <!-- => Reactive Object -->
  <!-- Task 4: Also solve the assignment with the Options API -->
</template>

<script>
//import { ref } from 'vue';
import { reactive } from 'vue';

export default {
  setup() {
    const courseGoal = 'Something is written here';
    //const showGoal = ref(false);
    const Goal = reactive({
      visibility: false
    });

    // ref way
    //function toggleGoal() {
    //  showGoal.value = !showGoal.value;
    //  console.log(showGoal.value);
    //}

    // ref object way
    //function toggleGoal() {
    //  Goal.value.visibility = !Goal.value.visibility;
    //}

    // reactive way
    function toggleGoal() {
      Goal.visibility = !Goal.visibility;
    }

    return {
      courseGoal,
      Goal,
      toggleGoal
    };
  }
};
</script>

<style>
html {
  font-family: sans-serif;
}
body {
  margin: 3rem;
  text-align: center;
}
</style>