title: Remove item from array in Vue
body: <p>I have the following task list app. I am trying to implement a <code>delete</code> function. I get I need to use <code>splice</code> to remove the item from the <code>array</code> but how do I target only the item whose button I clicked on?</p>
  
  <p><a href="https://jsfiddle.net/clintongreen/txtrage5/1/" rel="nofollow noreferrer">https://jsfiddle.net/clintongreen/txtrage5/1/</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>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);
          }
      }
  
  })  
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container" id="tasks"&gt;
  
      &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;
              {{ message }}
          &lt;/h3&gt;
        &lt;/div&gt;
        &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item clearfix" v-for="task in tasklist" &gt;
              {{ task.description }}
              &lt;!-- &lt;button class="btn btn-primary btn-sm pull-right" v-if="!task.completed" @click="completeTask(task)"&gt;Complete&lt;/button&gt; --&gt;
              &lt;div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed"&gt;
                &lt;button type="button" class="btn btn-primary" @click="completeTask(task)"&gt;Complete&lt;/button&gt;
                &lt;button type="button" class="btn btn-info"&gt;Edit&lt;/button&gt;
                &lt;button type="button" class="btn btn-danger" @click="removeTask(task)"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-default btn-sm completed text-muted pull-right disabled" v-else&gt;Completed&lt;/button&gt;
          &lt;/li&gt;
          &lt;li class="list-group-item clearfix"&gt;
              &lt;input v-model="newTaskName" @keyup.enter="newTask" type="text" class="pull-left"&gt;
              &lt;button class="btn btn-success btn-sm pull-right" @click="newTask"&gt;Add Task&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>