Tengo un bloque # cada uno, que muestra una imagen y texto. Si un usuario hace clic en un botón, quiero mostrar un componente en esa imagen específica, no todas las imágenes. En este momento, tengo algo como lo siguiente, así que #if loading, muestra el componente LoadingSpinnger. Esto se muestra en todas las imágenes, no solo en la que se hizo clic. ¿Hay alguna manera de agregar un componente dentro de un div para que no se aplique a todas las imágenes?

 {#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}
0
Alteredorange 4 may. 2020 a las 23:11

2 respuestas

Esto se debe a que la variable loading no está vinculada a ninguna imagen específica.

Para rastrear el estado de carga de cada thing, use un diccionario con clave thing.id.

Luego verifique el diccionario loading con thing.id:

{#each things as thing}
  {#if loading[thing.id]}
    <LoadingSpinner/>
  {:else}
    <img src={thing.src}/>
  {/if}
{/each}
1
joshnuss 5 may. 2020 a las 04:36

La respuesta de Joshnuss también funciona, pero necesitaba mantener la variable de carga como un valor verdadero / falso porque alternaba otras variables. Así que acabo de agregar una nueva variable, thingLoading, y la usé así:

{#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}
0
Alteredorange 5 may. 2020 a las 15:15