ドットインストールの「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(vari=0;i<this.todos.length;i++){this.todos[i].isDone=true}},rmvAll:function(){for(vari=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つのボタンで一括選択⇄一括解除の切り替えができるようにしたかったのですが、詰まってしまったので、まずはそれぞれのボタンを作成することで作成してみました。