0

我有一个#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}
4

2 回答 2

1

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

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

然后检查loading字典thing.id：

{#each things as thing}
  {#if loading[thing.id]}
    <LoadingSpinner/>
  {:else}
    <img src={thing.src}/>
  {/if}
{/each}
于 2020-05-05T04:36:11.740 回答
1

Joshnuss 的回答也有效，但我需要将加载变量保持为真/假值，因为它会切换其他变量。所以我只是添加了一个新变量 ,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}
于 2020-05-05T15:15:32.013 回答