スニペット - 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;amp; Button Snippet”>

<span>See the Pen <a href="https://codepen.io/ikatakos/pen/WBwoEj/">
Vue.js Checkbox List &amp; 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>

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