BETA

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

投稿日:2018-10-31
最終更新:2018-10-31

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が何番目に当たるので、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の解説は省きましたが前回同様、こちらにサンプルを準備しているのでご確認ください!!

  • 技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
    駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
    or 外部アカウントで 登録 / ログイン する
    クランチについてもっと詳しく

    この記事が掲載されているブログ

    @QA8SrqqPrVZPs6LSの技術ブログ

    よく一緒に読まれる記事

    0件のコメント

    ブログ開設 or ログイン してコメントを送ってみよう
    目次をみる
    技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
    or 外部アカウントではじめる
    10秒で技術ブログが作れます!