VueJS 1.0 に問題があり、この動作は VueJS 2.0 で機能します。VueJS 1.0 では、整数のリストがあり、それにチェックボックス v-model がバインドされている場合、整数のリストはチェックされた属性としてマップされません。
ここにHTMLがあります
<div id="app">
<div class="col-sm-offset-3 col-sm-4 clearfix text-center">
<h4>On Each Day of The Week</h4>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" v-model="schedules[0].by_days" value="1"> M
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" v-model="schedules[0].by_days" value="2"> Tu
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" v-model="schedules[0].by_days" value="3"> W
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox4" v-model="schedules[0].by_days" value="4"> Th
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox5" v-model="schedules[0].by_days" value="5"> F
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox6" v-model="schedules[0].by_days" value="6"> Sa
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox7" v-model="schedules[0].by_days" value="7"> Su
</label>
<div class="clearfix"></div>
</div>
By Days: {{ schedules[0].by_days.join(', ') }}
</div>
次に、JavaScript を次に示します。
new Vue({
el: '#app',
data: {
schedules: [
{
'by_days': ["1", 2, 3]
}
]
}
})
出力では「1」が正しくチェックボックスに入れられますが、2 と 3 は整数であり、チェックされたものとして表示されません。VueJS 2.0 ではこれは機能しますが、VueJS 1.0 では機能しません。
完全な JSFiddle はこちらから入手できます: https://jsfiddle.net/qf5gqsg6/