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

算出プロパティを使って、ToDoの残数を表示させていきます。

算出プロパティ
filter

算出プロパティとは
テンプレート内に書ける式はとても便利ですが、それは非常に簡単な操作しかできません。テンプレートは View の構造を説明するはずです。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。Vue.js がバインディング式を1つの式だけに制限するのはこのためです。複数の式を要求するロジックがある場合、算出プロパティ (computed property) を使用する必要があります。

基本の例

<div id="example">
 a={{ a }}, b={{ b }}
</div>

var vm = new Vue({
 el: '#example',
 data: {
   a: 1
 },
 computed: {
   // 算出 getter 関数
   b: function () {
     // `this` は vm インスタンスを指します
     return this.a + 1
   }
 }
})

結果:

a=1,b=2

では次ですが、 ToDolist の残数を表示してみます。
いろいろな方法がありますが computed というキーを使って、データから動的にプロパティを計算してくれる、算出プロパティを使ってみます。

remaining という名前にしてあげて、データから自動的に remaining を算出して、プロパティにしてあげます。

  computed: {
     remaining: function() {
       var items = this.todos.filter(function(todo) {
         return !todo.isDone;
       });
       return items.length;
     }
   }

説明：

isDone が false である項目の数を調べたいので、 JavaScript の filter() の命令を使ってあげます。 filter() 関数を引数に取るので、 function(todo) としつつ、ちょっとややこしいのですが、 todo の isDone が false 、つまりまだ残っているタスクを return してあげれば、それをフィルターして items にまだ終わっていないタスクだけを入れてくれます。
まだ終わっていないタスクの件数が知りたいので length を返してあげれば、 remaining には isDone が false のタスクの件数が入ってくるはずです。

次は表示のために span タグで書いてあげます。

あとでスタイルをつけていくので info としつつ、まずはタスクの残数なので、 remaining としつつ、せっかくなのでトータルのタスク数も todos.length で表示しておいてあげます。

<span class="info">({{ remaining }}/{{ todos.length }})</span>

下記の info のスタイルを付けてあげます。   .

.info {
 color: #bbb;
 font-size: 12px;
 font-weight: normal;
}

ちゃんと残っているタスクの数が表示されていて、いろいろいじってあげるとちゃんと動的に更新されているのがわかるかと思います。

以上今回の全体ソースコードは下記となります。

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