I am facing an issue with developing a to-do list using Vue.js.
The goal is to add tasks to the list by entering them and clicking a button.
Once added, the new task should show up under "All Tasks" and "Not finished".
Buttons for marking tasks as "done" or "not done" are provided for both categories.
If a task is marked as done, it should be moved from "All Tasks" to "finished".
Tasks not marked as finished should remain in the "Not finished" section with only a "done" button available.
This is what I have been able to accomplish so far. I need help figuring out how to make this to-do list fully functional.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="lib/js/vue.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="todoapp">
<h1>TO-DO</h1>
<p>
<label for="newtask">Add New Task</label>
<input id="newtask" type="text" v-model="newtasks" />
<button class="hinzu" v-on:click="newtask">Add</button>
</p>
<h1>All Tasks</h1>
<ul>
<li v-for="task in tasks">
{{aufgabe}}<br /><button class="Task not done!">Not Done!</button
><button class="Task done!">Done!</button>
</li>
</ul>
<h2>Not Finished</h2>
<ul>
<li v-for="task in tasks">
{{aufgabe}}<br /><button class="Task not done!">Not Done</button
><button class="Task done!" v-on:click="done">Done!</button>
</li>
</ul>
<h2>Finished</h2>
<ul></ul>
</div>
<script>
var app = new Vue({
el: "#todoapp",
data() {
return {
tasks: [],
};
},
methods: {
newtask() {
this.tasks.push(this.newtasks);
},
done() {
this.tasks.pop(this.newtasks);
},
},
});
</script>
</body>
</html>