No sé si el título es super acertado, no se me ocurrió mejor manera de explicarlo.
Digamos que tenemos un modelo:
let model = [ { "id": 0, "title": "Apple" }, { "id": 1, "title": "Orange" }, { "id": 2, "title": "Tomato" }, { "id": 3, "title": "Avocado" } ]Que renderizamos así:
{#each model as item} <Item {...item}></Item> {/each} En el componente Item , imprimimos en la consola cuando el componente se monta y se destruye:
<script> import {onMount, onDestroy} from 'svelte' export let id export let title onMount(() => { console.log('Mounted: ' + title) }) onDestroy(() => { console.log('Destroyed: ' + title) }) </script> <div id={id}>{title}</div>También tenemos un botón, que elimina el elemento "Naranja" del modelo:
function deleteOrange() { model.splice(1, 1) model = model // I don't know if this is the correct way to force an update } // ... <input on:click={deleteOrange} type="button" value="Delete Orange">Cuando se presiona el botón, el componente Naranja desaparece del DOM como debería, pero la consola dice:
"Destroyed: Avocado"¿Hay alguna manera de decirle a Svelte que destruya el componente "Orange", en lugar de destruir "Avocado" y mover los accesorios para que coincidan con el modelo?
Esbelto REPL:
https://svelte.dev/repl/f22b37cb88c449118ff76bb5a82c296e?version=3.48.0
Simplemente agregue una (key) a each de sus bucles:
{#each model as item (item.id)} <Item {...item}></Item> {/each}Esto asegurará que los elementos DOM se rastreen correctamente. Según la documentación de Svelte:
Si se proporciona una expresión clave, que debe identificar de forma única cada elemento de la lista, Svelte la usará para diferenciar la lista cuando cambien los datos, en lugar de agregar o eliminar elementos al final. La clave puede ser cualquier objeto, pero se recomiendan cadenas y números, ya que permiten que la identidad persista cuando los propios objetos cambian.