Vue JS ToDo 列表不会删除所有已完成的任务答案

【问题标题】：Vue JS ToDo list won't to delete all finished tasksVue JS ToDo 列表不会删除所有已完成的任务
【发布时间】：2018-08-29 17:01:24
【问题描述】：

“仅删除已完成”按钮有问题。它应该删除所有已完成的任务。当任务完成时，它会将属性“finishedTask”更改为 true。然后我将所有已完成的任务放入数组'finished'中，但是我不能从那个数组中一次删除所有任务。我使用两个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)

             }
       }

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以使用filter，而不是制作额外的数组，例如finishedTasks：

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

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

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

【讨论】：

谢谢，这很好用！！我相信我的代码可以简化，但我是 Vue 新手，还在学习。再次感谢。

【解决方案2】：

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

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

【讨论】：