Migrate Iterations

Migrate <aura:iteration> tags in an Aura component to for:each in a Lightning web component.

Here’s the Aura syntax.

1<aura:iteration items="{!v.items}" itemVar="item"> {!item} </aura:iteration>

Here’s the Lightning web component syntax.

1<template for:each={items} for:item="item">
2  <p key={item.id}>{item}</p>
3</template>

Note that you must use a key to assign a unique value to each item in the list. See Render Lists.

You can’t initialize list options in a Lightning web component template like you can in Aura component markup. You must initialize list options in JavaScript. See the lightning-dual-listbox component for an example.