Vue.jsでシンプルな汎用チェックボックスを用意してみた

チェックボックスって意外と面倒なところがあって、
これこそVue.jsをうまく使いたいなと思います。

なるべく使いまわしできそうな感じっていうと
こんな感じでしょうかね。

---

汎用チェックボックス

{{extension}}

スタイルはまあ良いとして
骨格をこんな感じにしてみました。

Copied!

file_copy

<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>

<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

---