Remove item from array in Vue
13,762
Solution 1
removeTask: function(task){
this.tasklist.splice(this.tasklist.indexOf(task), 1);
}
Solution 2
Use the index of the task in the v-for
to decide which item to splice()
:
v-for="(task, index) in tasklist"
Your button:
<button type="button" class="btn btn-danger" @click="removeTask(index)">Delete</button>
And then simply:
removeTask: function(index) {
this.tasklist.splice(index, 1);
}
Solution 3
For Vue2 use delete
. See API.
removeTask: function(index){
this.$delete(this.tasklist, index)
}
Comments
-
Clinton Green over 1 year
I have the following task list app. I am trying to implement a
delete
function. I get I need to usesplice
to remove the item from thearray
but how do I target only the item whose button I clicked on?https://jsfiddle.net/clintongreen/txtrage5/1/
JS
new Vue({ el: '#tasks', data: { message: 'Tasks', completed: null, newTaskName: '', tasklist: [ { description: 'Read', completed: true }, { description: 'Write', completed: true }, { description: 'Edit', completed: false }, { description: 'Publish', completed: false } ] }, methods: { completeTask: function(task){ // console.log(this.tasks.description); task.completed = true; }, newTask: function(){ this.tasklist.push({description: this.newTaskName, completed: false}); }, removeTask: function(task){ this.tasklist.splice(this.task.index, 1); } } })
HTML
<div class="container" id="tasks"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> {{ message }} </h3> </div> <ul class="list-group"> <li class="list-group-item clearfix" v-for="task in tasklist" > {{ task.description }} <!-- <button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask(task)">Complete</button> --> <div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed"> <button type="button" class="btn btn-primary" @click="completeTask(task)">Complete</button> <button type="button" class="btn btn-info">Edit</button> <button type="button" class="btn btn-danger" @click="removeTask(task)">Delete</button> </div> <button class="btn btn-default btn-sm completed text-muted pull-right disabled" v-else>Completed</button> </li> <li class="list-group-item clearfix"> <input v-model="newTaskName" @keyup.enter="newTask" type="text" class="pull-left"> <button class="btn btn-success btn-sm pull-right" @click="newTask">Add Task</button> </li> </ul> </div> </div>