VueJS Checkbox Model Array of Ints

Question

I have an issue with VueJS 1.0, and this behavior works in VueJS 2.0. In VueJS 1.0 if I have a list of integers and have a checkbox v-model bound to it, the list of integers will not map as a checked attribute.

Here is the 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>

Then here is the JavaScript:

new Vue({
    el: '#app',
    data: {
        schedules: [
            {
            'by_days': ["1", 2, 3]
          }
        ]
    }
})

The output will have "1" correctly checkboxed, but 2 & 3 are integers and will not show as checked. In VueJS 2.0 this works, but not VueJS 1.0.

A full JSFiddle is available here: https://jsfiddle.net/qf5gqsg6/

Kornelius Kristian Rayani · Accepted Answer · 2017-06-13 05:24:42Z

4

Change your data ["1",2,3] into [1,2,3]

Change your your checkbox input element value into :value

answered Jun 13, 2017 at 5:24

Kornelius Kristian Rayani

1211 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Montanez · Accepted Answer · 2016-10-29 10:26:18Z

1

I found the answer, I need to set the bind the value to the input instead of just relying on the value from the input.

So instead of:

<input type="checkbox" v-model="schedules[0].by_days" value="2"> M

It needed to be:

<input type="checkbox" v-model="schedules[0].by_days" v-bind:value="2"> M

Of course this doesn't work if there is a list of mixed strings and integer numbers, but it works in my case where everything was an integer.

answered Oct 29, 2016 at 10:26

Joseph Montanez

1,7181 gold badge20 silver badges31 bronze badges

1 Comment

lucas Over a year ago

And also because the number 2 in value="2" is a string, not a number.

Collectives™ on Stack Overflow

VueJS Checkbox Model Array of Ints

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related