在#Each 块中仅显示 1 个元素的 Svelte 组件

Question

我有一个#each 块，显示图像和文本。如果用户单击一个按钮，我想在该特定图像上显示一个组件，而不是所有图像。现在，我有类似下面的东西，所以 #if loading，显示 LoadingSpinnger 组件。这显示在所有图像上，而不仅仅是单击的图像。有没有办法在 div 中添加一个组件，使其不适用于所有图像？

 {#each things as thing}
        <div class="image">
          {#if loading}
            <LoadingSpinner />
          {/if}
          <img
            src={thing.p}
            id ={thing.id}  />
        </div>
      <div class="info">
        Name: {thing.n} Species: {thing.s}
      </div>
      <div class="button">
        <button on:click={addComponent()}>
          Button Text
        </button>
      </div>
  {/each}

Answer 1

这是因为 loading 变量未绑定到任何特定图像。

要跟踪每个 thing 的加载状态，请使用由 thing.id 键入的字典。

然后用thing.id检查loading字典：

{#each things as thing}
  {#if loading[thing.id]}
    <LoadingSpinner/>
  {:else}
    <img src={thing.src}/>
  {/if}
{/each}

Answer 2

Joshnuss 的回答也有效，但我需要将加载变量保持为 true/false 值，因为它会切换其他变量。所以我刚刚添加了一个新变量，thingLoading，并像这样使用它：

{#each things as thing}
    <div class="image">
      {#if loading && thingLoading === thing.id}
        <LoadingSpinner />
      {/if}
      <img
        src={thing.p}
        id ={thing.id}  />
    </div>
  <div class="info">
    Name: {thing.n} Species: {thing.s}
  </div>
  <div class="button">
    <button on:click={addComponent()}>
      Button Text
    </button>
  </div>
{/each}

在#Each 块中仅显示 1 个元素的 Svelte 组件

Show Svelte Component for Only 1 Element In #Each Block

javascript

svelte

svelte-component