Vue.js - Check a checkbox if in arrays

Question

Working on a view that has checkboxes inside a v-for loop:

<ul class="object administrator-checkbox-list">
    <li v-for="module in modules">
        <label v-bind:for="module.id">
            <input type="checkbox" v-model="form.modules" v-bind:value="module.id" v-bind:id="module.id" v-if=>
            <span>@{{ module.name }}</span>
        </label>
    </li>
</ul>

I also have a data of 'form' (using Laravels Spark Form Object) that has access to a 'currentModules' property that consists of the current resources relationship to a modules table.

I am looking to check the checkboxes that exist in the currentModules property.

Example of the 'modules' data used in the v-for the data:

[
    { 
        "id": 1, 
        "name": "Business", 
        "created_at": "2016-11-23 09:57:03", 
        "updated_at": "2016-11-23 09:57:03" 
    },
    { 
        "id": 2, 
        "name": "Houses", 
        "created_at": "2016-11-23 09:57:03", 
        "updated_at": "2016-11-23 09:57:03" 
    }
]

And the data from 'form.currentModules' is the exact same format. How can I check the checkboxs if the module id is in the currentModules using Vue?

Do you also want to add/remove modules from form.currentModules when the checkbox is clicked? — asemahle
– asemahle, Commented Dec 6, 2016 at 16:21
Nope, thats handled elsewhere just need to set them as checked on initial page load. Currently looking to see if a filter will allow me to do this easiest. @asemahle — Lovelock
– Lovelock, Commented Dec 6, 2016 at 16:23

Dan Mindru · Accepted Answer · 2016-12-06 21:06:19Z

1

To select the boxes, you form.modules to contain the ids of the selected items, i.e.:

data: function () {
  return {
    form: {
      modules: [1, 2]
    },
    // ...
  }
}

Check out this bin to see an example :-)

edited Dec 6, 2016 at 21:06

answered Dec 6, 2016 at 21:00

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Vue.js - Check a checkbox if in arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related