はじめに
Vueに対応していこう～。ということで始めたわけですが、
checkboxの再描画にもハマりましたんで残しておきます。
Vue版、ハマったところinputの再描画編~~の対応もあったのですが、checkboxなりのことがあったのでここに投稿します。
結論
ここを見ている方は、たぶん、同じ症状の方だと思うのでとっとと結論書きます。
checkboxは配列にする！これに尽きるのではないかと思われました。
そうです、初期値から配列です！空っぽでも、空の配列です！
あとkeyも設定してみましたので、チェックボックス一覧のデータは連想配列にしておきました。
なぜ配列だとうまくいくのか
逆に、配列にしないとtrue、falseが返ってくるだけなので、データの保存しようがないです。
配列は２つ用意
チェックボックスはラジオボタンと違って、複数チェックを可能にするために用いると思います。
そのため、
チェックボックス一覧の配列と
データの配列（初期表示でチェックをつけていないといけないデータ）の
２つに必要です
※checkbox自体も２つ以上ある場合があると思うので、「:id」「:name」にする箇所も一意にするために配列にする必要があるかと、、、
Aの中で選択とBの中で選択みたいな感じですね。
ソースはこんな感じです。
<div v-for="(items,idx) in チェックボックス一覧の配列">
<input :id="うまく一意となるように設定"
:name="うまく一意となるように設定"
:key="items.id"
type=checkbox
v-model="データの配列"
v-bind:value="items.item"
:checked="データの配列.indexOf(items.item) > -1" />{{ items.item }}<br>
<!-- 初期のチェックがないらないので、v-modelとv-bind:valueを併記する -->
</div>
ちょっと説明
前途の通り、「:id」「:name」を設定し、
「チェックボックス一覧の配列」をv-forで回すのですが、この配列が連想配列になっているので
「:key」には、itemsのidを指定しています。
「type」は「checkbox」でいいですね。
「v-model」には、初期でチェック表示したいデータがVueのvmのrefits[4]を指定します。
この配列の中に、更にデータが配列で入っているイメージです。
「v-bind:value」には、v-forで回っているitemsの連想配列のitemを指定します。
そして初期のチェックをつけるために「:checked」には、
「refits[4].indexOf(items.item) > -1」左記の判定式を入れました。
v-modelは、v-bind:valueとv-bind:onを包括的に、、、みたいな記事もありましたが、
とりあえず、上記で私の試した感じだとうまくいっております。
v-modelとv-bind:valueに違うものを設定しているので、上記の記事と異なるのはわかりますが、なぜ動くのはいまいちよくわかっておりません。
理解できた方教えてください。
感想
表示のされ方が分かればデータを作成するだけなので、
ゴリゴリ書くより断然楽になりますね。
全体の記事はこちら↓
スプレッドシートをDB代わりにGASのWebアプリを作成しデータ更新させてみた。Vue版 その１～～