【Vue.js】リストレンダリングを学んでToDoリストを作ろう

Web

リストレンダリング

Vue.jsではv-forディレクティブを使用することで、以下のようにリストレンダリングが可能になります。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{item}}
    </li>
  </ul>
</div>
const app = new Vue({
  el: '#app',
  data: {
    items: ["item1", "item2", "item3"]
  }
}

この場合、DOMには次のように展開されます。

<div id="app">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

このようにitemsの内容が順に展開されていることがわかります。

v-for="(item, index) in items"とあるように、itemにはitemsの要素が、indexにはitemsのインデックスが設定されます。インデックスについは不要であれば省略できます。

v-forでは、key属性として要素を一意に識別できる値をバインドする必要があります。上例では, :key="index"のようにインデックスをkeyとしてバインドしています。

ToDoリストを作ってみよう

簡単なものではありますがv-forを活用して、次のようなToDoリストを作成しました。ソースも見られるので参考にしてみてください。

See the Pen
bJmmoy
by b1san (@b1san1)
on CodePen.

それでは簡単な解説をしていきます。

フィルタリング

条件によって表示したい配列要素をフィルタリングするといったケースはしばしば見受けられます。このような場合には算出プロパティを使用します。

今回のToDoリストでもすべて・未完了・完了の3種類の表示パターンを以下のように実装しています。

computed: {
  showTasks() {
    switch(this.show) {
      case 0:  //すべて
        return this.tasks;
      case 1:  //未完了
        return this.tasks.filter(e => !e.done);
      case 2:  //完了
        return this.tasks.filter(e => e.done);
      default:
        return [];
    }
  }
}

配列で条件に一致する要素を抜き出すにはfilterメソッドを使用します。今回は省略して記載していますが実際には以下のように記載します。

array.filter(function(element) {
  //trueの要素が抜き出される
  return boolean_value;
});

あとはshowTasksを一覧表示することで、showの値とともにshowTasksの要素も変化するため結果的に表示される内容が変わります。

v-if と v-for

フィルタリングをする際にv-ifを利用するケースが考えられますが、公式で推奨されていません。 例えば次のような記述はNGになります。

<li v-for="task in tasks" :key="task.id" v-if="task.done">

配列要素の更新

配列に要素を追加するには、pushメソッドを使用します。

add() {
  this.task.push({
    task: this.value,
    done: false
  });
}

また要素を削除するには、spliceメソッドを使用します。

del(index) {
  this.task.splice(index, 1);
}

Vue.jsでは配列の更新を検知し、DOMを更新するためにこれらのメソッドをラップしています。ラップされているメソッドには次のようなものがあります。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

そのため配列に変更を加える場合にはこれらのメソッドを使用しなければいけません。

例えば次のように要素を変更したとしてもDOMの更新は行われません。

data: {
   items: ["item1", "item2", "item3"] 
},
methods: {
   change(index, value) {
     this.items[index] = value; 
   }
}

この場合はspliceメソッドを使用します。

change(index, value) {
  this.items.splice(index, 1, value);
}

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました