Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

solve the task with a ref object

This commit is contained in:
Andreas Zweili 2021-09-04 11:57:57 +02:00
parent 148ea7aa8e
commit 6d1f81d23a
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
2021-09-04_composition-assignment-1-problem/src/App.vue
View File

@ -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
};
}