Svelte嵌套{#each}循环下Modal展示错误问题求助

我正在开发一个页面，用于展示卖家（店铺）信息，每个卖家卡片下方设有一个Modal，点击打开后需展示该卖家的完整产品列表。
我已获取包含所需全部数据的API响应，因此使用{#each}循环遍历结果，每个卖家对象都包含关联产品的products数组。
我在父{#each}循环内嵌套了另一个{#each}循环，用于在卖家卡片内展示产品名称，这部分功能正常。之后我添加了来自daisyUI的Modal组件，期望点击时展示对应卖家的产品，于是在Modal内创建了类似的{#each}循环遍历该卖家的products数组，但问题出现了：所有卖家卡片的Modal打开后，均只显示数组中第一个卖家的产品，而非对应卖家的产品。

API数据格式 #

卖家数组 #

[
  {
    __typename: 'Sellers',
    id: 'adbd9aaa-909e-4bc0-b966-dc75e394ee36',
    image: {
      __typename: 'directus_files',
      id: '79029bc7-15fb-4589-a118-b7db67817db6'
    },
    name: 'Marakana',
    products: [ [Object], [Object] ]
  },
  // ...更多卖家数据
]

产品数组（每个卖家的products字段） #

[
  {
    __typename: 'Sellers_Products',
    Products_id: {
      __typename: 'Products',
      id: '41ca1726-be1a-4304-9a57-5be102b30fa7',
      name: 'Pizza',
      description: 'Good margarita',
      image: [Object]
    }
  },
  // ...更多产品数据
]

当前代码（+page.svelte） #

<script>
    export let data;
</script>

{#each data.data.Sellers as seller(seller.id)}

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="http://localhost:8055/assets/{seller.image.id}?fit=cover&width=400&height=225&quality=100" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      {seller.name}
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>{seller.description}</p>
        <div class="card-actions justify-end">
            
            {#each seller.products as product(product.Products_id.id)}
      <div class="badge badge-outline">{product.Products_id.name}</div>
            {/each}
        
        </div>
        <label for="my-modal-6" class="btn modal-button">open modal</label> 
        <input type="checkbox" id="my-modal-6" class="modal-toggle" />
        <div class="modal modal-bottom sm:modal-middle">
            <div class="modal-box">
            
                {#each seller.products as product(product.Products_id.id)}
                    <h3 class="font-bold text-lg">{product.Products_id.name}</h3>
                    <figure><img src="http://localhost:8055/assets/{product.Products_id.image.id}?fit=cover&width=400&height=225&quality=100" alt="Shoes" /></figure>
                    <p class="py-4">{product.Products_id.description}</p>
                    <div class="modal-action">
                        <label for="my-modal-6" class="btn">add to cart</label>
                    </div>
            
                    {/each}

            </div>
        </div>
    </div>
</div>

{/each}

问题出在Modal的ID重复上。你循环生成的所有Modal都使用了同一个id="my-modal-6"，当点击任意一个打开按钮时，浏览器只会匹配到第一个拥有该ID的Modal元素，所以所有按钮打开的都是第一个卖家的Modal内容。

修改方法很简单：给每个Modal的ID加上卖家的唯一标识（比如seller.id），确保每个Modal的ID都是独一无二的。

修改后的代码如下：

<script>
    export let data;
</script>

{#each data.data.Sellers as seller(seller.id)}
<!-- 生成唯一的Modal ID -->
{#const modalId = `my-modal-${seller.id}`}

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="http://localhost:8055/assets/{seller.image.id}?fit=cover&width=400&height=225&quality=100" alt="Store image" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      {seller.name}
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>{seller.description}</p>
    <div class="card-actions justify-end">
      {#each seller.products as product(product.Products_id.id)}
        <div class="badge badge-outline">{product.Products_id.name}</div>
      {/each}
    </div>
    <!-- 使用唯一的Modal ID关联label和input -->
    <label for={modalId} class="btn modal-button">open modal</label> 
    <input type="checkbox" id={modalId} class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle">
      <div class="modal-box">
        {#each seller.products as product(product.Products_id.id)}
          <h3 class="font-bold text-lg">{product.Products_id.name}</h3>
          <figure><img src="http://localhost:8055/assets/{product.Products_id.image.id}?fit=cover&width=400&height=225&quality=100" alt={product.Products_id.name} /></figure>
          <p class="py-4">{product.Products_id.description}</p>
          <div class="modal-action">
            <!-- 关闭按钮也要使用对应唯一ID -->
            <label for={modalId} class="btn">add to cart</label>
          </div>
        {/each}
      </div>
    </div>
  </div>
</div>
{/each}

关键修改点 #

• 使用{#const modalId = \my-modal-${seller.id}`}`生成每个卖家专属的Modal ID
• 将label的for属性、input的id属性、关闭按钮的for属性都替换为这个唯一的modalId
• 顺带优化了图片的alt文本，使其更贴合实际内容

这样每个按钮都会对应打开属于当前卖家的Modal，展示正确的产品列表了。

内容的提问来源于stack exchange，提问作者Saif-Alislam Dekna