0

I want to iterate over records and display those many number of lightning cards. Each row should have 2 cards using grid. I tried using for:each but it is only working on list. Below is my code:

   <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_1-of-2 slds-p-horizontal_large">
                    <template for:each={contacts} for:item="contact">
                        <li key={contact.Id} >
                            <lightning-card  title="Hello">
                                <lightning-button label="Select" slot="actions"></lightning-button>
                                <p class="slds-p-horizontal_small">{contact.Name}, {contact.Title}</p>
                                <p class="slds-p-horizontal_small">50</p>
                                <p class="slds-p-horizontal_small">50</p>
                            </lightning-card>
                        </li>
                    </template>
                </div>
   </div>

I dont want to iterate over the list but the lightning card.

1

I have tried this and it works

HTML Code-

<template>
                    <div class="slds-grid slds-wrap">
                    <template for:each={contacts} for:item="contact">

                        <div key={contact.Id} class="slds-col slds-size_1-of-2">
                            <lightning-card  title="Hello">
                                <lightning-button label="Select" slot="actions"></lightning-button>
                                <p class="slds-p-horizontal_small">{contact.Name}, {contact.Title}</p>
                                <p class="slds-p-horizontal_small">50</p>
                                <p class="slds-p-horizontal_small">50</p>
                            </lightning-card>
                        </div>
                    </template>

   </div>
</template>

JS -

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

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

Here is the link for your reference - https://developer.salesforce.com/docs/component-library/tools/playground/9PQGPLDQ5/2/edit

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.