【Vue.js】ドットインストールTodoリストに、一括選択機能を追加してみた

ドットインストールの「Vue.js入門」という、Vue.jsでTodoリストを作るレッスンがあるのですが(有料)、リストを一度に全部選択する「一括選択機能」を追加したかったので付け加えてみました。

Vue初心者、かつ「Vue.js入門」を終えた、かつ「一括選択機能を追加したい」と思った人にしか参考にならないかもしれませんが、、書かせて頂きます。

完成イメージ

index.html 追加コード

index.html

    <button @click="selectAll">Select All</button>
    <button @click="rmvAll">Remove All</button>

Select All と Remove All のボタンを追加。
それぞれのボタンにv-onディレクティブを設定。

main.js 追加コード

main.js

selectAll: function() {
      for(var i=0; i<this.todos.length; i++) {
        this.todos[i].isDone = true
      } 
    }, 
rmvAll: function() {
      for(var i=0; i<this.todos.length; i++) {
            this.todos[i].isDone = false
          }             

【処理内容】
・Select Allをクリックすると、todos配列のisDoneキーの値がtrue(= チェックボックスにチェック)になる。
・Remove Allをクリックすると、todos配列のisDoneキーの値がfalse(= チェックボックスのチェックがなし)になる。

todos配列の動き.js

//Remove Allボタンをクリックで isDone:true → isDone:false になる
//Select Allボタンをクリックで isDone:false → isDone:true になる
todos: [
  {title: "aaa", isDone: true}, 
  {title: "bbb", isDone: true},
  {title: "ccc", isDone: true},
  {title: "ddd", isDone: true}
]

まとめ

本当は、1つのボタンで一括選択⇄一括解除の切り替えができるようにしたかったのですが、詰まってしまったので、まずはそれぞれのボタンを作成することで作成してみました。