5

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/

4

2 に答える 2