Vue JS 待办事项列表不会删除所有已完成的任务

Question

我对"仅删除已完成"按钮有问题。它应该删除所有已完成的任务。当任务完成时，它将属性"doneTask"更改为true。然后我把所有完成的任务都放到数组"完成"中，但我无法一次从该数组中删除所有任务。我使用了两个 for 循环来解决这个问题，但不幸的是它不能正常工作。向下是完整的 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)
}
}

Answer 1

无需创建额外的数组(例如finishedTasks(，您可以使用filter：

deleteFinished() {
this.todos = this.todos.filter(todo => !todo.finishedTask)
}

实际上，您的大多数代码都可以简化 - 您可以使用map将所有代码设置为已完成，而不是循环遍历数组。

JSFiddle 供参考：http://jsfiddle.net/wzmft26b/10

Answer 2

如果您只需要从数组中删除完成todos待办事项，则可以像这样覆盖它：

deleteFinished: function() {
let unfinished = []
this.todos.forEach(todo => {
if(!todo.finishedTask) {
unfinished.push(todo)
}
})
return this.todos = unfinished
}