VueJS复选框模型数组的整数

VueJS Checkbox Model Array of Ints

本文关键字：整数 数组 模型 复选框 VueJS      更新时间：2023-09-26

我在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/

将数据["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

当然，如果有一个混合字符串和整数的列表，这就不起作用了，但在我的情况下，它可以工作，所有的都是整数

相关文章：