Vue의 배열에서 항목을 제거하십시오.

Question

다음 작업 목록 응용 프로그램이 있습니다. delete 함수를 구현하려고합니다. array에서 항목을 제거하려면 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

사용 v-for에서 작업의 인덱스는 WHI 결정 splice()에 채널 항목 :

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