[全選択][checkbox]2019年5月30日JavaScriptVue.jsでチェックボックスを実装してみます。複数のチェックボックスを全選択する機能も説明します。1つだけのチェックボックスを実装します。true}});</script></body></html>11行目v-modelディレクティブを利用してデータとバインドしています。isCheckedというプロパティ名を設定しています。20行目isCheckedの値をtrueに設定するとチェックボックスにチェックが入ります。'はい'}});</script></body></html>複数のチェックボックス複数のチェックボックスを実装します。複数のチェックボックスの場合は、データを配列で用意します。次にチェックボックスを全選択する機能を追加します。checkArray;}}}});</script></body></html>12行目チェックボックスを全選択および全解除する機能を持つチェックボックスです。この値(selectAllプロパティの値)はcomputedオプションによって制御します。getterでは作家のチェックボックス(下3つのチェックボックス)による判定によって、全選択チェックボックスの値(trueもしくはfalse)を返しています。全選択のチェックボックス自体によって他のデータの編集(上記ではcheckNamesに対しての書き込み)をおこなうには、setterを利用する必要があります。全選択のチェックボックスにチェックを入れるとtrueとなり実行されます。チェックを外した場合(false)は実行されずに、そのままcheckNamesに空の配列が設定(54行目)されます。computedオプションおよびget/setの役割に関しては下記関連ページをご覧下さい。