Javascript: 从数组中删除项目

Question

在使用 Vue.js 时，我有一个函数可以删除所有已归档的任务，但我不知道如何从数组中删除该项目。

我尝试在 removeAllArchived 方法中调用 remove 函数，但它无法正确执行。

也只是调用 this.$remove(task) 不起作用。

new Vue({
 el: '#todo',

 data: {
  tasks: [
   { 'task': 'Eat breakfast', 'completed': false, 'archived': false },
   { 'task': 'Play with Klea', 'completed': false, 'archived': false },
   { 'task': 'Code some stuff', 'completed': false, 'archived': false }
  ],

  newTask: ''
 },

 methods: {
  toggleTaskCompletion: function(task) {
   task.completed = ! task.completed;
  },

  addTask: function(e) {
   e.preventDefault();

   this.tasks.push({
    'task': this.newTask,
    'completed': false,
    'archived': false
   });

   this.newTask = '';
  },

  editTask: function(task) {
   this.tasks.$remove(task);

   this.newTask = task.task;

   // focus on input field
   this.$$.newTask.focus();
  },

  archiveTask: function(task) {
   task.archived = true;
  },

  removeTask: function(task) {
   this.tasks.$remove(task);
  },

  completeAll: function() {
   this.tasks.forEach(function(task) {
    task.completed = true;
   });
  },

  removeAllArchived: function() {
   this.tasks.forEach(function(task) {
    if(task.archived == true) {
     console.log(task.task);
     delete(task);
    }
   });
  }
 },

 filters: {
  inProcess: function(tasks) {
   return tasks.filter(function(task) {
    return ! task.completed && ! task.archived;
   });
  },

  inDone: function(tasks) {
   return tasks.filter(function(task) {
    return task.completed && ! task.archived;
   });
  },

  inArchive: function(tasks) {
   return tasks.filter(function(task) {
    return task.archived;
   });
  }
 },

 computed: {
  completions: function() {
   return this.tasks.filter(function(task) {
    return ! task.completed && ! task.archived;
   });
  },

  done: function() {
   return this.tasks.filter(function(task) {
    return task.completed && ! task.archived;
   });
  },

  archived: function() {
   return this.tasks.filter(function(task) {
    return task.archived;
   });
  }
 }

});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.5/vue.min.js"></script>

 <div id="todo">

  <h1>Vue Todo</h1>


  <div class="row">
   <div class="col-xs-12">
    <form v-on="submit: addTask">
     <div class="form-group">
      <label for="name">Add Todo:</label>
      <input type="text" name="name" id="name" class="form-control" v-model="newTask" v-el="newTask">
     </div>

     <div class="form-group">
      <button type="submit" class="btn btn-primary">Add Task</button>
     </div>    
    </form>
   </div>
  </div>
  

  <div class="row">
   <div class="col-xs-12 col-sm-6 col-md-4">
    <h2>Todo <small v-if="completions.length">({{ completions.length }})</small></h2>
    <table class="table">
     <thead>
      <tr>
       <th>Task</th>
       <th>Options</th>
      </tr>
     </thead>
     <tbody>
      <tr v-repeat="task: tasks | inProcess">
       <td>{{ task.task }}</td>
       <td>
        <buttn class="btn btn-xs btn-success" v-on="click: toggleTaskCompletion(task)">Complete</buttn>
        <buttn class="btn btn-xs btn-primary" v-on="click: editTask(task)">Edit</buttn>
        <buttn class="btn btn-xs btn-danger" v-on="click: archiveTask(task)">Archive</buttn>
       </td>
      </tr>
     </tbody>
    </table>   
   </div>
   <div class="col-xs-12 col-sm-6 col-md-4">
    <table class="table">
     <h2>Done <small v-if="done.length">({{ done.length }})</small></h2>
     <thead>
      <tr>
       <th>Task</th>
       <th>Options</th>
      </tr>
     </thead>
     <tbody>
      <tr v-repeat="task: tasks | inDone">
       <td>{{ task.task }}</td>
       <td>
        <buttn class="btn btn-xs btn-success" v-on="click: toggleTaskCompletion(task)">Uncomplete</buttn>
        <buttn class="btn btn-xs btn-danger" v-on="click: archiveTask(task)">Archive</buttn>
       </td>
      </tr>
     </tbody>
    </table>   
   </div>
   <div class="col-xs-12 col-sm-6 col-md-4">
    <h2>Archived <small v-if="archived.length">({{ archived.length }})</small></h2>
    <table class="table">
     <thead>
      <tr>
       <th>Task</th>
       <th>Options</th>
      </tr>
     </thead>
     <tbody>
      <tr v-repeat="task: tasks | inArchive">
       <td>{{ task.task }}</td>
       <td>
        <buttn class="btn btn-xs btn-danger" v-on="click: removeTask(task)">Remove</buttn>
       </td>
      </tr>
     </tbody>
    </table>   
   </div>
  </div>

  <div class="row">
   <div class="col-xs-12">
    <button class="btn btn-warning" v-on="click: completeAll">Complete All</button>
    <button class="btn btn-danger" v-on="click: removeAllArchived">Remove All Archived</button>
   </div>
  </div>
  <pre>{{ $data | json }}</pre>
 </div>

removeAllArchived: function() {
    this.tasks.forEach(function(task) {
        if(task.archived == true) {
            console.log(task.task);
            // remove task
        }
    });
}

如何使按钮 "Remove All Archived" 起作用？

Answer 1

我认为您需要直接从数组中删除属性，从参数中删除引用不会得到任何结果。

removeAllArchived: function() {
    this.tasks.forEach(function(task, index) {
        if(task.archived == true) {
            console.log(task.task);
            delete(this.tasks[index]);
        }
    });
}

过滤掉数组可能会更好：

removeAllArchived: function() {
    this.tasks = this.tasks.filter(function(task){
         return task.archived !== true;
    });
}

编辑：它清除了非存档。现在它删除存档。

Answer 2

你可以使用切片，或者我喜欢并使用这里的这个片段：http://ejohn.org/blog/javascript-array-remove/

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Javascript: 从数组中删除项目

Javascript: Remove Item from Array

javascript

laravel

vue.js