【Vue.js】Todoアプリに削除機能を実装してみる

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を関数化し、todoの削除を実装します。

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

methods内にdeleteItem: function()とし、deleteItemに対する関数を作成します。
その関数内にthis.todosでtodos配列にアクセスし、spliceを使用します。
(index, 1)と指定することで、index番目から1つだけtodoを削除することができます。

ユーザーに削除していいか確認を取る

ここまでで、ToDoアプリに削除機能を実装することができました。
Webサービスでもよくあるかと思いますが、ここではAre you sure?とユーザーに本当に削除してよいかの確認を取ります。

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

deleteItemが実行されたときにconfirm('Are you sure?')と確認をし、ユーザーがOKを選択すれば、削除が行われるようにします。

以上で今回のTodoアプリに削除機能を実装してみるは完成です！！
CSSの解説は省きましたが前回同様、こちらにサンプルを準備しているのでご確認ください！！