implement the task with ref
This commit is contained in:
parent
0c0335abd5
commit
148ea7aa8e
|
@ -2,9 +2,9 @@
|
||||||
<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>OUTPUT COURSE GOAL</h3>
|
<h3 v-if="showGoal">{{ 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>Toggle Goal</button>
|
<button @click="toggleGoal">Toggle Goal</button>
|
||||||
<!-- Task 3: Manage data in three ways -->
|
<!-- Task 3: Manage data in three ways -->
|
||||||
<!-- => Separate refs -->
|
<!-- => Separate refs -->
|
||||||
<!-- => Ref Object -->
|
<!-- => Ref Object -->
|
||||||
|
@ -13,9 +13,25 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -26,4 +42,4 @@ body {
|
||||||
margin: 3rem;
|
margin: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Reference in New Issue