Estoy muy confundido acerca de pasar accesorios a un componente dentro de un bucle en Svelte. El comportamiento que esperaba del fragmento de código a continuación es que un cambio en los archivos de variables de la tienda activa la reproducción del contenido que funciona perfectamente para las clases divs y {file}: {is_open} . Sin embargo, el componente secundario Icon no recibe las actualizaciones de la variable is_open . Esto conduce a una situación extraña en la que {file}: {is_open} representa como filename: true en este componente, mientras que el icono del componente secundario mostraría filename: false en su lugar.
{#each Object.entries($files) as [file, is_open], i} <div class:open={is_open} class:closed={!is_open}> <div on:click={() => openFile(file)}> {file}: {is_open} </div> <div on:click={() => closeFile(file)}> <Icon bind:open={is_open} /> </div> </div> {/each}Buscando una solución para este problema, me topé con este hilo que indica que este es el comportamiento esperado en este caso. Pero, ¿cómo puedo hacer que esto funcione entonces? En marcado contraste con mi experiencia general con Svelte, encuentro esto extremadamente contradictorio.
EDITAR:
Resulta que no uso is_open directamente en el componente secundario, sino que almaceno el valor en otra variable sin notación $: por lo tanto, esta variable no se vuelve a calcular. Mala mía, problema resuelto.
lo que está buscando es una clave para cada bloque , esto asegurará que los divs (el bloque dentro de cada declaración) se asignen correctamente al estado de archivo correcto.
también puede consultar el tutorial oficial esbelto sobre cada clave en su caso
{#each Object.entries($files) as [file, is_open], i (file)} <!--added (file)--> <div class:open={is_open} class:closed={!is_open}> <div on:click={() => openFile(file)}> {file}: {is_open} </div> <div on:click={() => closeFile(file)}> <Icon bind:open={is_open} /> </div> </div> {/each}