スニペット - Vue.js
記事を作成した理由の80%くらいは、CodePenの埋め込みがDokuwikiでも使えるのかのテストだったり。
フォーム
チェックボックス
dataに適当な配列(checkedItems)を持ち、チェックボックスのv-modelにバインディングすると、選択されたチェックボックスのvalueと、配列の要素が連動する。
☑aaa □bbb ⇔ checkedItems: ["aaa", "ccc"] ☑ccc
どちらを操作しても、もう一方に反映される。ただし、javascript上でcheckboxのpropをいじった場合は配列に反映されないので、jsからは基本的に配列を操作した方がよい。
これを使うと、1つも選択してない場合にボタンを無効にしたり、全て選択ボタンを実装したり等が比較的すっきり書ける。
See the Pen Vue.js Checkbox List & Button Snippet by ikatakos (@ikatakos) on CodePen.