Cómo recorrer la matriz en Svelte

Cómo recorrer la matriz en Svelte

En este tutorial, aprenderemos cómo hacer un bucle sobre el tablero en forma esbelta.

Slender tiene una sintaxis especial llamada each bloque que nos ayuda a representar una lista de elementos en el dom.

Ejemplo:

List-rendering.svelte

<script>
   let users = [
       {id:1,name: "king"},
       {id:2, name: "gowtham"},
       {id:3, name: "sai"}
      ]
</script>


<ul>
    //users is array and user is an alias
    {#each users as user}       <li>{user.id}</li>
       <li>{user.name}</li>
    {/each}

</ul>

En el código anterior tenemos un users matriz donde user es un alias que apunta al objeto diferente en cada iteración.



cada bloque de muestra

Índice
  1. Ir al índice
  2. desestructuración
  3. Llaves

Ir al índice

También podemos acceder al índice del elemento presente dentro de la matriz.

<ul>{3}
    //users is array and user is an alias
    {#each users as user,index}
       <li>{user.id}</li>
       <li>{user.name}</li>
    {/each}
</ul>

desestructuración

En el ejemplo anterior, usamos el user como un alias para acceder a las propiedades del objeto id Y nameen su lugar, también podemos usar la sintaxis de desestructuración.

<ul>
  {#each users as { id, name }}    <li>{id}</li>
    <li>{name}</li>
  {/each}
</ul>

Llaves

A veces necesitamos eliminar o actualizar los elementos particulares de la lista. En tales casos, tenemos que pasar un unique identifier En each block para que svelte pueda averiguar exactamente qué elemento está tratando de eliminar o actualizar.

ejemplo:

List-rendering.svelte

<script>
  let users = [
    { id: 1, name: "king" },
    { id: 2, name: "gowtham" },
    { id: 3, name: "sai" }
  ];

  function removeUser(i) {
     users = users.filter((user, i) => i !== index);
  }
</script>

<style>
  li {
    padding: 1rem;
    box-shadow: 1px 1px 1px #0000;
    background-color: royalblue;
    margin-bottom: 1rem;
    color: white;
  }
</style>

<ul>
  
  {#each users as { id, name }, i (id)}    <li on:click={() => removeUser(i)}> {id} - {name} </li>  {/each}
</ul>

adelgazar-eliminar-elementos-ejemplo

Si quieres conocer otros artículos parecidos a Cómo recorrer la matriz en Svelte puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas