Intenté a continuación diferentes formas de cambiar los accesorios de objetos en cada bloque, pero obtuve un resultado diferente.
Primero, uso la función anónima en línea para cambiar el nombre del gato en cada bloque, como el paso 1 en el código a continuación.
Pero cuando llamo al controlador de eventos en la función nombrada, no cambia en absoluto en cada bloque, como el paso 2 .
Finalmente, intento asignar accesorios en la función en línea primero, luego llamo a la función nombrada y también cambia el valor, como el paso 3 .
Tengo curiosidad por qué el paso 2 no funciona para cambiar el valor en cada bloque.
Gracias por leer !
<script> let cats = [ { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, { id: 'z_AbfPXTKms', name: 'Maru' }, { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' } ]; const named = (cat) => cat.name = 'named'; </script> <h1>The Famous Cats of YouTube</h1> <ul> {#each cats as cat (cat.id)} // step 1. referenced <li on:click={()=>cat.name='inline'}>{cat.name}</li> // step 2. not referenced <li on:click={()=>named(cat)}>{cat.name}</li> // step 3. referenced <li on:click={()=>{ cat.name='inline'; named(cat); }}>{cat.name}</li> {/each} </ul>La reactividad de Svelte se activa con las asignaciones, por lo que actualizar cat.name no actualizará automáticamente las referencias a cats , a menos que siga con cats = cats , así:
<ul> {#each cats as cat (cat.id)} <li on:click={() => { cat.name = 'inline'; cats = cats; } }>{cat.name}</li> {/each} </ul> Por lo tanto, otra solución es actualizar el propio objeto cats :
<ul> {#each cats as cat, i (cat.id)} <li on:click={() => cats[i].name = 'inline'}>{cat.name}</li> {/each} </ul>