title: Vue - input with multiple checkboxes
body: <p>I'm rendering some checkboxes based on an array and using a data attribute as the <code>v-model</code>. I'm using Vue2.</p>
  <p>However, I end up having all checkboxes checked for some reason, when the value of the <code>v-model</code> equals 1 (I guess it treats it as a bool instead of a number).</p>
  <p>I tried <code>v-model.number</code> - without any luck. What am I doing wrong?</p>
  <p><strong>My template:</strong></p>
  <pre><code>&lt;div v-for=&quot;category in categories&quot;&gt;
    &lt;input
      type=&quot;checkbox&quot;
      v-model.number=&quot;item.category&quot;
      :id=&quot;'category_' + category.id&quot;
      :value=&quot;category.id&quot;
      @change=&quot;save&quot;
    /&gt;
    &lt;label&gt;{{ item.category }} : {{ category.id }}&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Model Data (item.category):</strong></p>
  <pre><code>1
  </code></pre>
  <p><strong>Categories:</strong></p>
  <pre><code>[
    {
      &quot;id&quot;: 2,
      &quot;name&quot;: &quot;news Category 0&quot;
    },
    {
      &quot;id&quot;: 7,
      &quot;name&quot;: &quot;news Category 1&quot;
    },
    {
      &quot;id&quot;: 12,
      &quot;name&quot;: &quot;news Category 2&quot;
    },
    {
      &quot;id&quot;: 17,
      &quot;name&quot;: &quot;news Category 3&quot;
    },
    {
      &quot;id&quot;: 22,
      &quot;name&quot;: &quot;news Category 4&quot;
    },
    {
      &quot;id&quot;: 27,
      &quot;name&quot;: &quot;news Category 5&quot;
    },
  // other values
  ]
  </code></pre>
  <p><strong>Screenshot (Ive added item.category and category.id as label text to make it more clear):</strong></p>
  <p><a href="https://i.stack.imgur.com/csxe7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/csxe7.png" alt="Vue checkbox v-model typecasting" /></a></p>