VueJS 复选框模型整数数组

Question

我遇到 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/

Answer 1

我找到了答案，我需要将值绑定到输入，而不是仅仅依赖于输入的值。

所以代替：

<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

当然，如果存在混合字符串和整数的列表，这将不起作用，但它适用于我的情况，其中所有内容都是整数。

Answer 2

将您的数据 ["1",2,3] 更改为 [1,2,3]

将您的复选框输入元素 value 更改为 :value

VueJS 复选框模型整数数组

VueJS Checkbox Model Array of Ints

javascript

vue.js

vuejs2