I'm encountering an issue with the 'DELETE ONLY FINISHED' button. The goal is for this button to delete all finished tasks. When a task is completed, its 'finishedTask' property changes to true. I have attempted to store all finished tasks in an array named 'finished'. However, I am unable to delete them all at once from that array. I tried using two nested for loops to address this problem, but unfortunately, it did not yield the desired results. Below is the complete code implemented in Vue.js. JSFiddle GitHub
new Vue({
el: '#app',
data: {
index: 0,
finished: [],
todos: [],
newTask: "",
},
methods: {
addTask() {
todo = {
index: this.index++,
task: this.newTask,
finishedTask: false
}
if (this.newTask == '') {
alert('Write a task!')
}
else {
this.todos.push(todo);
this.newTask = "";
}
},
delete: function(index) {
this.todos.splice(index, 1)
},
deleteEverything: function() {
if (this.todos.length == 0)
alert('You dont have tasks!')
else
this.todos.splice(0, this.todos.length)
this.newTask = ""
},
finish: function(index) {
this.todos[index].finishedTask = !this.todos[index].finishedTask
},
finishEverything: function() {
for (var i = 0; i < this.todos.length; i++)
this.todos[i].finishedTask = true
},
deleteFinished: function() {
for (var i = 0; i < this.todos.length; i++) {
if (this.todos[i].finishedTask == true) {
this.finished.push(this.todos[i].index)
}
for (var j = 0; j < this.finished.length; j++) {
this.todos.splice(this.finished[j], 1)
}
}