add my solution for assignment 5
This commit is contained in:
parent
75b413f488
commit
bd2d65990a
|
@ -0,0 +1,30 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const app = Vue.createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tasks: [],
|
||||||
|
newTask: "",
|
||||||
|
showTasks: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
buttonText() {
|
||||||
|
if (this.showTasks) {
|
||||||
|
return "Hide Tasks";
|
||||||
|
} else if (!this.showTasks) {
|
||||||
|
return "Show Tasks";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addTask(newTask) {
|
||||||
|
this.tasks.push(this.newTask);
|
||||||
|
},
|
||||||
|
toggleTasks() {
|
||||||
|
this.showTasks = !this.showTasks;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount("#assignment");
|
|
@ -19,14 +19,16 @@
|
||||||
<h2>Assignment</h2>
|
<h2>Assignment</h2>
|
||||||
<!-- 1) Add code to manage a list of tasks in a Vue app -->
|
<!-- 1) Add code to manage a list of tasks in a Vue app -->
|
||||||
<!-- When clicking "Add Task" a new task with the entered text should be added -->
|
<!-- When clicking "Add Task" a new task with the entered text should be added -->
|
||||||
<input type="text">
|
<input type="text" v-model="newTask">
|
||||||
<button>Add Task</button>
|
<button @click="addTask">Add Task</button>
|
||||||
<ul>
|
<ul v-if="showTasks">
|
||||||
<!-- 2) Output the list of tasks here -->
|
<!-- 2) Output the list of tasks here -->
|
||||||
|
<li v-for="task in tasks" :key="task">{{task}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<p v-if="!showTasks"></p>
|
||||||
<!-- 3) When the below button is pressed, the list should be shown or hidden -->
|
<!-- 3) When the below button is pressed, the list should be shown or hidden -->
|
||||||
<!-- BONUS: Also update the button caption -->
|
<!-- BONUS: Also update the button caption -->
|
||||||
<button>Hide / Show List</button>
|
<button @click="toggleTasks">{{ buttonText }}</button>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Reference in New Issue