Remove item from array in Vue

Question

I have the following task list app. I am trying to implement a delete function. I get I need to use splice to remove the item from the array 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>

Marty · Accepted Answer · 2017-03-16 22:15:49Z

9

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

answered Mar 16, 2017 at 22:15

Marty

39.5k19 gold badges97 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bert · Accepted Answer · 2017-03-16 22:14:21Z

8

removeTask: function(task){
    this.tasklist.splice(this.tasklist.indexOf(task), 1);
}

answered Mar 16, 2017 at 22:14

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 21:52:01Z

3

For Vue2 use delete. See API.

removeTask: function(index){
    this.$delete(this.tasklist, index)
}

edited Jul 15, 2022 at 21:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 3, 2018 at 15:54

Programmeur

1,5254 gold badges22 silver badges33 bronze badges

Comments

Tri Mueri Sandes · Accepted Answer · 2022-06-29 17:52:38Z

0

You can use indexOf to get the current index from the array

remove: function (task){
      this.tasklist.splice(this.tasklist.indexOf(task),1);
    },

answered Jun 29, 2022 at 17:52

Tri Mueri Sandes

1481 silver badge7 bronze badges

Collectives™ on Stack Overflow

Remove item from array in Vue

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related