Vue.jsのコンポーネントオプション(computed, created)

前回はHTML側に指定されている、v-repeatとv-modelを確認したので、
今回はJavaScriptコード内にある、コンポーネントオプションの確認をしていきます。

コードの確認

var app = new Vue({
    el: '#todo',
    data: {
        todos: []
    },
    computed: {
        lefts: function(){
            return this.todos.filter(function(t){ return !t.isDone }).length;
        }
    },
    created: function(){
        this.title = "My Todos";
        var suffix = ["a","b","c","d","e"] 
        for(var i = 0; i < suffix.length; i++){
            this.todos.push({ isDone:false , title:"task-" + suffix[i] });
        }
    },
    methods:{
        addTodo: function(){
            this.todos.push({ isDone:false , title:"task-" + this.todos.length });
        }
    }
})

1st stepに使用されていたのは、el, data, methodだけでした。今回は、

computed
created

が新しく登場しているので、こちらの確認をしてみます。

computedオプション

computed: {
      lefts: function(){
          return this.todos.filter(function(t){ return !t.isDone }).length;
      }
}

computedオプションの、leftsプロパティは, HTML側を見ると、

<div>
    left {{lefts}} tasks.
</div>

Mustache形式でバインドされています。この部分は、残っているtodoの数を表示するためのものです。

元記事の説明文を参照すると・・・

dataの値を利用した計算式のようなフィールドを表現するのに使用する。

ということなので、まさしくtodoの残り数を計算するために、computedを使っているのでしょう。もう少し、leftsの中で何をやっているか見てみます。

lefts: function(){
          return this.todos.filter(function(t){ return !t.isDone }).length;
}

this.todosですが、以下のtodosプロパティの配列を指しています。

  data: {
      todos: []
  },

この配列に入ったデータにたいして、filterメソッドを使用しています。ここでは、「todosの配列の中にある要素で、t.isDoneではないもの(false)」の配列を作成し、さらに.lengthメソッドで配列の要素の数を返す」ということを行っています。

createdオプション

  created: function(){
      this.title = "My Todos";
      var suffix = ["a","b","c","d","e"]
      for(var i = 0; i < suffix.length; i++){
          this.todos.push({ isDone:false , title:"task-" + suffix[i] });
      }
  },

createdオプションは、ガイドを見ると、

DOM のコンパイルは開始されておらず、$el プロパティはまだ有効ではありません。

元記事では、

createdは、初期化処理に使用できる。

とのことなので、DOM生成前にデータを作成しておきたい場合に使用するオプションのようです。 (※コードを見るとまずthis.titleとありますが、 HTML側にはバインドされておらず、実際に使用されていないようなのでこれは無視します。)

次に、アルファベットの文字を格納したsuffixという配列を用意しています。次のfor文ではtodosの配列に、{ isDone:false, title:"task-" + suffix[i] }という値をpushメソッドによって追加しています。

つまり、todosという配列には、(前回の記事)[]で確認したv-modelディレクティブによって渡される、

チェックボックスのON/OFFを判定する isDoneプロパティ
画面に表示される文字列(0:task-a)の titleプロパティ

が入っており、createdオプションによってTODOの初期データが生成されていることがわかりました。