チェックボックスって意外と面倒なところがあって、
これこそVue.jsをうまく使いたいなと思います。
なるべく使いまわしできそうな感じっていうと
こんな感じでしょうかね。
スタイルはまあ良いとして
骨格をこんな感じにしてみました。
Copied!
<div id="checkbox1"> <form method="post"> <dl class=""> <dt class="">汎用チェックボックス</dt> <dd v-for='(extension, idx) in checkboxList'> <input type="checkbox" name="extension[]" :value=extension> {{extension}} </dd> </dl> </form> </div> <script> let checkbox1 = new Vue({ el: '#checkbox1', data: { checkboxList: ['jpg', 'png', 'gif', 'svg'], }, }) </script>
項目の増減はcheckboxListを編集するだけでOK。
あとは、必要に応じてPOSTすれば使えますね。
(続く)
Hikaru
