スニペット - Vue.js

記事を作成した理由の80%くらいは、CodePenの埋め込みがDokuwikiでも使えるのかのテストだったり。

フォーム

dataに適当な配列(checkedItems)を持ち、チェックボックスのv-modelにバインディングすると、選択されたチェックボックスのvalueと、配列の要素が連動する。

☑aaa
□bbb  ⇔  checkedItems: ["aaa", "ccc"]
☑ccc

どちらを操作しても、もう一方に反映される。ただし、javascript上でcheckboxのpropをいじった場合は配列に反映されないので、jsからは基本的に配列を操作した方がよい。

これを使うと、1つも選択してない場合にボタンを無効にしたり、全て選択ボタンを実装したり等が比較的すっきり書ける。