JavaScript
SPA
Vue.js

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


Vue.jsだけでToDoアプリの削除機能を実装できる!

この記事ではこんな風にVue.jsだけでToDoアプリの削除機能を実装します!

Screen Capture 45.mp4.gif

ちなみに前回まではコチラで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が何番目に当たるので、indexdeleteItemに渡します。

今回は削除の実装なので、見た目は[x]にします。

class="command"とすれば後に装飾をするのに便利です。


Todoを削除できるようにする~JavaScript編~

JavaScript側でdeleteItemを関数化し、todoの削除を実装します。

},

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

methods内にdeleteItem: function()とし、deleteItemに対する関数を作成します。

その関数内にthis.todostodos配列にアクセスし、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の解説は省きましたが前回同様、こちらにサンプルを準備しているのでご確認ください!!