今回の学習ポイントは下記となります。

完了したToDoを一括削除する方法について見ていきます。

1.Purgeボタンの作成
2.purgeの実装
3.v-for

v-forとは、私達は配列に基づいて、アイテムのリストをレンダリングするために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです。

例えば：

<ul id="example-1">
 <li v-for="item in items">
   {{ item.message }}
 </li>
</ul>

var example1 = new Vue({
 el: '#example-1',
 data: {
   items: [
     { message: 'Foo' },
     { message: 'Bar' }
   ]
 }
})

結果：

v-for ブロック内では、私達が親スコープのプロパティへ完全なアクセスに加えて、恐らく推測しているとおり、現在のアイテムに対する配列のインデックスで特別な変数 $index を持っています。

<ul id="example-2">
 <li v-for="item in items">
   {{ parentMessage }} - {{ $index }} - {{ item.message }}
 </li>
</ul>

var example2 = new Vue({
 el: '#example-2',
 data: {
   parentMessage: 'Parent',
   items: [
     { message: 'Foo' },
     { message: 'Bar' }
   ]
 }
})

結果：

あるいは、インデックス(または、オブジェクト使用されている場合はキー)に対してエイリアスを指定することもできます。

<div v-for="(index, item) in items">
 {{ index }} {{ item.message }}
</div>

では、完了した ToDo を一気に削除するための機能を作ってみます。
画面上の方に button を作ってあげます。
Purge という名前にしてあげて style を設定していきます。​
h1 の中の button に対して、 float: right; で OK です。

#app h1 > button {
 float: right;
}               

あとはイベントを設定したいので、 @click="purge" としてあげて、 purge メソッドを作ってあげます。

<button @click="purge">Purge</button>

次はmain.js の方に行ってあげて、下記のソース作っていけば OK ですね。

  purge: function() {
       if (!confirm('delete finished?')) {
         return;
       }
   },

deleteItem と同じく、 confirm で聞いてあげてもいいのですが、今回は Early return 的に delete finished? としてあげて、こちらが否定だったとき、つまりキャンセルされたときには return としてあげて、それ以降の処理を行わないようにしてあげます。

その上でもし OK が押されたら、消したいので this.todos に対して、まだ終わっていないタスクを割り当てればいいので、こちらの処理をそのままコピーしてあげれば isDone が false のもの、つまり終わっていないものだけに todos がなってくれるので、結果として終わったタスクが削除されます。

    purge: function() {
       if (!confirm('delete finished?')) {
         return;
       }
       this.todos = this.remaining;
     }

まず、 this.todos に対しては remaining を割り当てることにして、 remaining の方は終わった ToDo の数ではなくて、終わった ToDo の配列そのものを返すようにしてあげればいいかと思います。

     <li v-for="(todo, index) in todos">
       <input type="checkbox" v-model="todo.isDone">
       <span :class="{done: todo.isDone}">{{ todo.title }}</span>
       <span @click="deleteItem(index)" class="command">[x]</span>
     </li>

computed: {
     remaining: function() {

       return this.todos.filter(function(todo) {
         return !todo.isDone;
       });
     }
   }

そうすると、 remaining を表示した箇所を直さないといけないので、こちらを remaining.length としてあげれば remaining の個数が入るので上手くいくかと思います。

ちゃんと Purge すると上手くいっていますし、残数の表示も上手くいっているかと思います。

今回のソースは下記となります。

ファイルのパス：/VueApp/index.html