VueJS 체크박스의 모델 배열

VueJS 체크박스의 모델 배열

VueJ 1.0에 문제가 있으며 이 동작은 VueJ 2.0에서 동작합니다.VueJ 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은 정수이므로 체크박스로 표시되지 않습니다.VueJ 2.0에서는 이 기능은 동작하지만 VueJ 1.0에서는 동작하지 않습니다.

완전한 JSFiddle은 https://jsfiddle.net/qf5gqsg6/에서 구할 수 있습니다.

데이터 변경["1",2,3]안으로[1,2,3]

확인란 입력 요소 변경value안으로:value

답을 찾았습니다. 입력의 값에만 의존하는 것이 아니라 입력에 바인드 값을 설정해야 합니다.

그래서 다음 대신:

<input type="checkbox" v-model="schedules[0].by_days" value="2"> M

필요한 것은 다음과 같습니다.

<input type="checkbox" v-model="schedules[0].by_days" v-bind:value="2"> M

물론 문자열과 정수가 혼재된 리스트가 있는 경우에는 동작하지 않지만, 모든 것이 정수인 경우에는 동작합니다.

언급URL : https://stackoverflow.com/questions/40318107/vuejs-checkbox-model-array-of-ints