Question

我遇到了VueJS 1.0的问题，这种行为在VueJS 2.0中有效。在VueJS 1.0中，如果我有一个整数列表并且绑定了一个复选框v-model，则整数列表将不会映射为checked属性。

这是HTML

public static long CastIp(string ip)
{
    IPAddress address = IPAddress.Parse(ip);
    byte[] addressBytes = address.GetAddressBytes();
    // This restriction is implicit in your existing code, but
    // it would currently just lose data...
    if (addressBytes.Length != 4)
    {
        throw new ArgumentException("Must be an IPv4 address");
    }
    int networkOrder = BitConverter.ToInt32(addressBytes, 0);
    return (uint) IPAddress.NetworkToHostOrder(networkOrder);
}

然后是JavaScript：

<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>

输出将正确选中“1”，但2＆amp; 3是整数，不会显示为已选中。在VueJS 2.0中，这可行，但不适用于VueJS 1.0。

这里有一个完整的JSFiddle：documentation

Answer 1

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

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

Answer 2

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

所以而不是：

<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

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

VueJS Checkbox Model Ints数组

2 个答案: