スニペット - 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.

programming/web_development/javascript/vuejs/tips/snippets.txt · 最終更新: 2019/05/10 by ikatakos
CC Attribution 4.0 International
Driven by DokuWiki Recent changes RSS feed Valid CSS Valid XHTML 1.0