Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

masonfox's avatar

Vue Checkbox Object

So I have a predicament that I've run into when it comes to structuring this specific form data.

I have several checkboxes that will also need additional data tied to them. For example: a user can select a particular skill they have and then apply how much experience they have with that skill.

It should look something like this:

data: {
  skills: [
     {
       name: 'Blah',
       experience: '6+'
     }
  // next checkbox
  ]
}

But Vue will always create a checkbox array, but I need it to be an object bound to the name specific key.

Here is my basic checkbox for reference

<div class="col-xs-12 col-md-3 checkbox-btn-group checkbox-selection-group">
        <div class="form-check">
            <input type="checkbox" name="radio" id="button_3" value="button_3" v-model="form.roles">
            <label for="button_3">Button 3</label>
        </div>
 </div>
0 likes
4 replies

Please or to participate in this conversation.