Vueの配列から項目を削除

Question

私は以下のタスクリストアプリを持っています。私はdelete機能を実装しようとしています。私はからアイテムを削除するのにspliceを使用する必要がありますが、どのボタンをクリックしたアイテムだけをターゲットにするのですか？

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> 

Answer 1

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

Answer 2

WHIを決定するv-forにタスクのインデックスを使用しますsplice()にCHアイテム：

v-for="(task, index) in tasklist" 

あなたのボタン：単に、その後

<button type="button" class="btn btn-danger" @click="removeTask(index)">Delete</button> 

そして：

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