Considere que tengo una serie de objetos, de los cuales se pueden agregar y quitar cosas. Para cada objeto, quiero que se represente un componente Svelte.
Si se elimina un objeto, quiero que se destruya su componente Svelte correspondiente. Si se agrega un objeto, quiero que se cree un componente Svelte correspondiente.
Hasta ahora tengo algo ingenuo, como esto:
<script> let someObjects = []; const addObject = (obj) => { someObjects = [...someObjects, obj]; } const removeObject = (idx) => { someObjects.splice(idx, 1); someObjects = someObjects; } // ... </script> {#each someObjects as obj} <SomeComponent object={obj} /> {/each}Esto no funciona del todo. Si elimina un objeto a la mitad de la matriz, entonces, de hecho, desde la perspectiva de Svelte, el elemento final de la matriz se ha eliminado y otros elementos simplemente se han modificado.
Esto significa que los componentes Svelte se conservan pero con parámetros de object modificados, lo que rompe cualquier estado interno y lo que sea.
¿Cómo puedo forzar la destrucción de un objeto a la mitad de la matriz y evitar que los demás cambien? ¿La solución quizás esté relacionada con bind:this ?
Esto se puede archivar en "leer los documentos" (gracias Corrl).
Simplemente asegúrese de que su objeto tenga algún tipo de identificador único como campo, digamos id , luego use una clave para cada bloque:
{#each someObjects as obj (obj.id)} <SomeComponent object={obj} /> {/each}