LWC Foreach Object Data

Codice html


    <lightning-card title="HelloForEach" icon-name="action:goal">

        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
        <c-view-source source="lwc/helloForEach" slot="footer">
            Il file css deve avere lo stesso nome del file html e js a differenza dell'estensione




// le prime due righe si ripetono quasi identiche per ogni componente
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    // oggetto con i dati
    contacts = [
            Id: '003171931112854375',
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
            Id: '003192301009134555',
            Name: 'Michael Jones',
            Title: 'VP of Sales',
            Id: '003848991274589432',
            Name: 'Jennifer Wu',
            Title: 'CEO',
en English
en Englishfr Frenchde Germanit Italian