Vue.jsでチェックボックスを実装してみます。また複数のチェックボックスを全選択する機能も説明します。
まずは1つだけのチェックボックスを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <label><input type="checkbox" v-model="isChecked">元気</label> <p>{{ isChecked }}</p> </div> <script> new Vue({ el: '#app', data: { isChecked: true } }); </script> </body> </html> |
11行目
v-modelディレクティブを利用してデータとバインドしています。isCheckedというプロパティ名を設定しています。
20行目
isCheckedの値をtrueに設定するとチェックボックスにチェックが入ります。
もしtrue/false以外の表示をさせるには、true-value および false-value を利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <label><input type="checkbox" v-model="isChecked" true-value="はい" false-value="いいえ">元気</label> <p>{{ isChecked }}</p> </div> <script> new Vue({ el: '#app', data: { isChecked: 'はい' } }); </script> </body> </html> |
複数のチェックボックス
複数のチェックボックスを実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="author in authors"> <label><input type="checkbox" v-model="checkNames" v-bind:value="author.name">{{ author.name }}</label> </li> </ul> <p>{{ checkNames }}</p> </div> <script> new Vue({ el: '#app', data: { checkNames: [], authors: [ { id: 1, name: '夏目漱石' }, { id: 2, name: '太宰治' }, { id: 3, name: '村上春樹' } ] } }); </script> </body> </html> |
24行目
複数のチェックボックスの場合は、データを配列で用意します。
チェックボックスを全選択する機能
次にチェックボックスを全選択する機能を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li><label><input type="checkbox" v-model="selectAll">全選択</label></li> <li v-for="author in authors"> <label><input type="checkbox" v-model="checkNames" v-bind:value="author.name">{{ author.name }}</label> </li> </ul> <p>{{ checkNames }}</p> <p>全選択チェックボックス：{{ selectAll }}</p> </div> <script> new Vue({ el: '#app', data: { checkNames: [], authors: [ { id: 1, name: '夏目漱石' }, { id: 2, name: '太宰治' }, { id: 3, name: '村上春樹' } ] }, computed: { selectAll: { get: function () { //authorsのチェックボックスのすべてにチェックが入ったかを判定 if(this.checkNames.length == this.authors.length){ return true //authorsにすべてチェックを入れるとselectAllはtrueとなりチェックが入る }else{ return false } }, set: function (value) { //全選択のチェックボックスを操作した場合 //空の配列を用意 let checkArray = []; //チェックが入った場合（trueでの判定） if (value) { this.authors.forEach(function (author) { checkArray.push(author.name); }); } this.checkNames = checkArray; } } } }); </script> </body> </html> |
12行目
チェックボックスを全選択および全解除する機能を持つチェックボックスです。この値（selectAllプロパティの値）はcomputedオプションによって制御します。
33〜57行目
主にgetterでは作家のチェックボックス（下3つのチェックボックス）による判定によって、全選択チェックボックスの値（trueもしくはfalse）を返しています。また全選択のチェックボックス自体によって他のデータの編集（上記ではcheckNamesに対しての書き込み）をおこなうには、setterを利用する必要があります。
48〜52行目
全選択のチェックボックスにチェックを入れるとtrueとなり実行されます。もしチェックを外した場合（false）は実行されずに、そのままcheckNamesに空の配列が設定（54行目）されます。
computedオプションおよびget/setの役割に関しては下記関連ページをご覧下さい。
関連ページ
