Vue.js만으로 ToDo 앱 삭제 기능을 구현할 수 있습니다!

이 기사에서는 이런 식으로 Vue.js만으로 ToDo 앱 삭제 기능을 구현합니다!


덧붙여서 전회까지는 이쪽 에서 ToDo 앱을 만들고 있었으므로 참고까지 봐 주세요! !

Todo를 삭제할 수 있도록 하기 ~HTML편~

@click 물론 v-on:click을 사용하여 클릭 이벤트를 채울 수 있습니다.
그래서 deleteItem이라는 메소드로 삭제해 봅시다.

<ul>
 <li v-for="(todo, index) in todos">
  {{ todo }}
  <span @click="deleteItem(index)" class="command">[☓]</span>
 </li>
</ul>

이번은 deleteItem(index)로 하여 몇번째의todo를 삭제할까를 지시할 수 있도록(듯이) 합니다.
그때, 에서 todos 안의 몇번째 todo를 삭제하면 좋은지를 지정할 수 있습니다.
여기서 말하는 index가 몇번째에 해당하므로, index를 deleteItem에 건네줍니다.
이번은 삭제의 구현이므로, 외형은 [x]로 합니다.
class="command"라고 하면 나중에 장식을 하는데 편리합니다.

Todo를 삭제할 수 있도록 하는 ~JavaScript편~

JavaScript 측에서 deleteItem을 함수화하고 tot 삭제를 구현합니다.

},
 deleteItem: function(index){
   this.todos.splice(index, 1);
 }

methods내에 deleteItem: function()로 하고, deleteItem에 대한 함수를 작성합니다.
그 함수 내에서 this.todos로 todos 배열에 액세스하고 splice를 사용합니다.
(index, 1)을 지정하면 index 번째에서 하나만 tot를 삭제할 수 있습니다.

사용자에게 삭제해도 좋은지 확인

지금까지 ToDo 앱에 삭제 기능을 구현할 수있었습니다.
웹 서비스에서도 자주 있을까 생각합니다만, 여기에서는 Are you sure? 와 사용자에게 정말로 삭제해도 좋은지 확인을 취합니다.

deleteItem: function(index){
  if(confirm('Are you sure?')){ //確認をとる
    this.todos.splice(index, 1);
  }
}

deleteItem이 실행되었을 때 confirm('Are you sure?')라고 확인하고 사용자가 OK를 선택하면 삭제가 이루어지도록 합니다.

이상으로 이번 Todo 앱에 삭제 기능을 구현해 보는 것은 완성입니다! !
CSS의 해설은 생략했습니다만 전회와 같이, 여기에 샘플 를 준비하고 있으므로 확인해 주세요! !