スニペット - Vue.js
記事を作成した理由の80%くらいは、CodePenの埋め込みがDokuwikiでも使えるのかのテストだったり。
フォーム
チェックボックス
dataに適当な配列(checkedItems)を持ち、チェックボックスのv-modelにバインディングすると、選択されたチェックボックスのvalueと、配列の要素が連動する。
☑aaa □bbb ⇔ checkedItems: ["aaa", "ccc"] ☑ccc
どちらを操作しても、もう一方に反映される。ただし、javascript上でcheckboxのpropをいじった場合は配列に反映されないので、jsからは基本的に配列を操作した方がよい。
これを使うと、1つも選択してない場合にボタンを無効にしたり、全て選択ボタンを実装したり等が比較的すっきり書ける。
<html> <p class=“codepen” data-height=“380” data-theme-id=“0” data-default-tab=“js,result” data-user=“ikatakos” data-slug-hash=“WBwoEj” style=“height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;” data-pen-title=“Vue.js Checkbox List &amp; Button Snippet”>
<span>See the Pen <a href="https://codepen.io/ikatakos/pen/WBwoEj/"> Vue.js Checkbox List & Button Snippet</a> by ikatakos (<a href="https://codepen.io/ikatakos">@ikatakos</a>) on <a href="https://codepen.io">CodePen</a>.</span>
</p> <script async src=“https://static.codepen.io/assets/embed/ei.js”></script> </html>
