solve the task with a ref object
This commit is contained in:
parent
148ea7aa8e
commit
6d1f81d23a
|
@ -2,7 +2,7 @@
|
||||||
<h2>My Course Goal</h2>
|
<h2>My Course Goal</h2>
|
||||||
<!-- Task 1: Output your main course goal with help of the composition API -->
|
<!-- 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 -->
|
<!-- 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 -->
|
<!-- Task 2: Toggle (show/ hide) the goal with help of the button -->
|
||||||
<button @click="toggleGoal">Toggle Goal</button>
|
<button @click="toggleGoal">Toggle Goal</button>
|
||||||
<!-- Task 3: Manage data in three ways -->
|
<!-- Task 3: Manage data in three ways -->
|
||||||
|
@ -18,16 +18,25 @@ import { ref } from 'vue';
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const courseGoal = 'Something is written here';
|
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() {
|
function toggleGoal() {
|
||||||
showGoal.value = !showGoal.value;
|
Goal.value.visibility = !Goal.value.visibility;
|
||||||
console.log(showGoal.value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
courseGoal,
|
courseGoal,
|
||||||
showGoal,
|
Goal,
|
||||||
toggleGoal
|
toggleGoal
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue