1.2.4 配列と {#each} 構文による関連商品の表示

tenkao · May 9, 2023 · cda4023 · cda4023
1 parent 8086783
commit cda4023
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,4 +1,11 @@
 <script>
+  // 関連商品の配列
+  let relatedProducts = [
+    { id: 'react-book', name: 'React Book', price: 3500 },
+    { id: 'vue-book', name: 'Vue Book', price: 3500 },
+    { id: 'angular-book', name: 'Angular Book', price: 3500 },
+  ]
+
   // カートに入っている商品IDの配列
   let cart = []
 
@@ -43,9 +50,12 @@
   <footer>
     <h3>関連商品</h3>
     <ul>
-      <li><a href="/products/react-book">React Book</a> - 3,500円</li>
-      <li><a href="/products/vue-book">Vue Book</a> - 3,500円</li>
-      <li><a href="/products/angular-book">Angular Book</a> - 3,500円</li>
+      {#each relatedProducts as product}
+        <li>
+          <a href="/products/{product.id}">{product.name}</a>
+           - {product.price}円
+        </li>
+      {/each}
     </ul>
   </footer>
 </article>