current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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?

share|improve this question
    
Do you also want to add/remove modules from form.currentModules when the checkbox is clicked? – asemahle Dec 6 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 Dec 6 at 16:23
up vote 1 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.