Lightning Web Component　for:eachで繰り返し処理を行うサンプル

2023年8月10日

環境
sqlesforce

構文
template for:each={配列名} for:item="変数名"
「for:each」と「for:item」を使って、配列の要素
を繰り返し表示します。

1.JavaSciptファイル
配列の定義

listCity = [ 
     { Id: 11,Name:"東京" },
     { Id: 22,Name:"大阪" },
     { Id: 33,Name:"福岡" },
     { Id: 44,Name:"横浜" }
  ];

2.htmlコード

<template for:each={listCity} for:item="city">
        <li key={city.Id}>
            {city.Name}
        </li>
</template>