3

Currently, my requirement is that I want a checkbox in front of names.You can see below screenshot.

enter image description here

So I used lightning-checkbox-group in iteration but it does not work.

Here is the Playground Link for your reference

Here is the code i used -

HTML :-

<template>
<lightning-card title="HelloForEach" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">

<div key={contact.Id}>
<lightning-checkbox-group name="Checkbox Group"
                label="Checkbox Group"
                options={options}
                value={value}>
                </lightning-checkbox-group>
                 {contact.Name}, {contact.Title}

</div>
</template>
</ul>
</lightning-card>
</template>
1

You forgot to initialize an attribute for the selected values:

@track value = [];

Because of this, when the framework tries to determine which boxes are checked, it fails because of an undefined value. Note that this won't work directly, because the value would be bound to all the groups. Instead, you need to place the value in each contact entry.

Here's the new code:

<template>
<lightning-card title="HelloForEach" icon-name="custom:custom14">
<ul class="slds-m-around_medium">
<template for:each={contacts} for:item="contact">

<div key={contact.Id}>


    <lightning-checkbox-group name="Checkbox Group"
                label="Checkbox Group"
                options={options}
                value={contact.value}>
                </lightning-checkbox-group>


                {contact.Name}, {contact.Title}

</div>
</template>
</ul>
</lightning-card>
</template>

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
            value: []
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
            value: []
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
            value: []
        },
    ];
    get options() {
        return [
            { label: '', value: 'option1' },

        ];
    }
}

I've also updated your Playground for you.

4
  • Actually in my case date comes from Backend SFDC and i have to iterate that with the custom checkbox in UI . SO how can i achieve that – Sahil Malhotra Jan 2 '20 at 13:24
  • @SahilMalhotra You'd use an Apex method wired to the JavaScript controller, and after loading the data, use a method to transform that data into the format you need for this lightning-checkbox-group setup to work.Where exactly are you stuck, and how can we help you? – sfdcfox Jan 2 '20 at 15:21
  • @sfdcfox We need help with this 'a method to transform that data into the format you need for this lightning-checkbox-group setup to work.' – Mohit Kulkarni Jan 5 '20 at 6:26
  • @sfdcfox Done....Thanks – Mohit Kulkarni Jan 5 '20 at 8:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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