Vue.jsでチェックボックス [全選択][checkbox]

2019年5月30日

Vue.jsでチェックボックスを実装してみます。また複数のチェックボックスを全選択する機能も説明します。

 

まずは1つだけのチェックボックスを実装します。

11行目

v-modelディレクティブを利用してデータとバインドしています。isCheckedというプロパティ名を設定しています。

 

20行目

isCheckedの値をtrueに設定するとチェックボックスにチェックが入ります。

 

 

もしtrue/false以外の表示をさせるには、true-value および false-value を利用します。

 

 

複数のチェックボックス


 

複数のチェックボックスを実装します。

24行目

複数のチェックボックスの場合は、データを配列で用意します。

 

 

 

チェックボックスを全選択する機能


 

次にチェックボックスを全選択する機能を追加します。

12行目

チェックボックスを全選択および全解除する機能を持つチェックボックスです。この値(selectAllプロパティの値)はcomputedオプションによって制御します。

 

33〜57行目

主にgetterでは作家のチェックボックス(下3つのチェックボックス)による判定によって、全選択チェックボックスの値(trueもしくはfalse)を返しています。また全選択のチェックボックス自体によって他のデータの編集(上記ではcheckNamesに対しての書き込み)をおこなうには、setterを利用する必要があります。

 

48〜52行目

全選択のチェックボックスにチェックを入れるとtrueとなり実行されます。もしチェックを外した場合(false)は実行されずに、そのままcheckNamesに空の配列が設定(54行目)されます。

 

computedオプションおよびget/setの役割に関しては下記関連ページをご覧下さい。

 

算出プロパティcomputedについて

 

 

関連ページ

ラジオボタン [radio button]

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー