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

4

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

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

于 2017-06-13T05:24:42.163 回答
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

当然，如果有一个混合字符串和整数的列表，这不起作用，但它适用于我的情况，即一切都是整数。

于 2016-10-29T10:26:18.370 回答