Vue.js~ToDoリスト③~

今回はToDoリストの削除機能を作っていきます。

では、実装していきましょう！！

#削除機能

index.html

<ul>
      <li v-for="(todo,index) in todos">
        No.{{index}}:{{ todo }}
        <span class="delete-button" v-on:click="deleteItem(index)">✗</span>
      </li>
</ul>

spanタグを追加して、✗を付けます。また、このspanタグをボタン化したいので、v-on:clickを使います。またここで、CSSを書くためのクラスも付与しておきます。
deleteItemと追加して、何番目のindexを削除するのかを指定します。

index.js

methods: {
    UPItem: function(event) {
      this.todos.push(this.newItem)
    },
    deleteItem: function(index) {
      if (confirm('No.' + String(index) +'削除しますか?')) {
        this.todos.splice(index, 1);
      }
    }
  }

実行機能にdeleteItemを追加します。
今回、関数fanctionに引数としてindexが上がってきます。
そして、this.todos~...のspliceという新しいメゾットが出てきました。
これは、配列の要素を操作するメゾットになります。
①要素を取り除く
②置き換える
③追加する
ことができます。

#splice　使い方
これを使うときは、第1引数は必須となります。第2引数はオプションとなっています。
今回の場合はindexを引数として指定し、第2因数は1となります。これは、1個削除してねって指示になっています。

また削除する前に、削除しますか？？っというダイアログを追加したいと思います。
confirmというメゾットを使うことで、作成することができます。