Question

我的“仅删除完成”按钮有问题。它应该删除所有完成的任务。任务完成后，将属性“ finishedTask”更改为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

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

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

Answer 2

您可以使用scope.getSampleFile=function() { ... }来代替finishedTasks之类的其他数组：

filter

实际上，大多数代码都可以简化-您可以使用deleteFinished() { this.todos = this.todos.filter(todo => !todo.finishedTask) }将所有代码设置为已完成，而不是遍历数组。

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

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

2 个答案: