Javascript: Удалить элемент из массива

При использовании Vue.js У меня есть функция, которая удалит все архивные задачи, но я не знаю, как удалить элемент из массива.Javascript: Удалить элемент из массива

Я попытался вызвать функцию remove внутри метода removeAllArchived, но он не будет выполняться должным образом.

Также просто звоните . $ Remove (задача) не работает.

new Vue({ 
 
\t el: '#todo', 
 

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

 
\t \t newTask: '' 
 
\t }, 
 

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

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

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

 
\t \t \t this.newTask = ''; 
 
\t \t }, 
 

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

 
\t \t \t this.newTask = task.task; 
 

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

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

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

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

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

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

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

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

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

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

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

 
});

<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> 
 

 
\t <div id="todo"> 
 

 
\t \t <h1>Vue Todo</h1> 
 

 

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

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

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

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

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

Как сделать кнопку "Удалить все архивированное" работы?

источник

2015-08-03 LoveAndHappiness

Если вы только удаление некоторых элементов из массива, вы можете использовать '.splice()' в удалите отдельные элементы из массива. Разумеется, вы должны будете знать об изменении индексов после изменения массива. – jfriend00

Я думаю, вам нужно удалить свойство непосредственно из массива, вы ничего не получите, удалив ссылку из параметра.

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

Edit: Это вычистили не архивируются. Теперь он удаляет архив.

источник

2015-08-03 04:11:47 MinusFour

Вы можете использовать кусочек, или мне нравится, и использовать этот надрез отсюда: 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); 
};

источник

2015-08-03 04:18:05

Javascript: Удалить элемент из массива

ответ

Смежные вопросы