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
        }
    });
}

如何使“删除所有存档”按钮起作用？

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);
};