En pocas palabras, estoy creando una aplicación web como mycolor.space, en la que escribes el valor hexadecimal de un color y la aplicación arroja un montón de paletas de colores usando una biblioteca llamada tinycolor, que hace algunas aclaraciones, oscurecimientos y rotaciones simples. de matices

Por lo tanto, puedo manejar todas las vinculaciones y suscripciones al valor de la tienda que llamaremos primaryColor . primaryColor se actualiza con éxito cuando el usuario escribe un código hexadecimal en un campo de entrada. Tengo un componente esbelto llamado Palettes.svelte que se parece a esto:

 <script> import tiny color from 'tinycolor2' export let color const palettes = [ { name: 'Simple Gradient', colors: [ tinycolor(color).colorMutationFunction1(), tinycolor(color).colorMutationFunction2(), . . . ] }, . . . ] </script> <main> <h1>{color}</h1> {#each palettes as palette} {#each palette.colors as color} <div>{color}</div> {/each} {/each} </main>

Así que la funcionalidad principal está ahí. Produce paletas de colores basadas en el valor de la tienda inicial, que vive dentro de la matriz desde el principio. El problema es que el color del valor dentro de la matriz de palettes no se actualiza de forma reactiva cuando el usuario cambia el valor del color hexadecimal en la entrada. Como era de esperar, la etiqueta h1 en el cuerpo principal de este componente se actualiza junto con la tienda. He leído aquí y allá que para cambiar iterativamente los valores de la matriz en función de un cambio en el estado de una variable de la tienda en svelte, debe hacer una sintaxis extraña que establezca la matriz en sí misma, como palettes = palettes . Sin embargo, solo he visto esto en el contexto de una función.

Por favor, hágamelo saber si más información sería de alguna idea. El resto de mi aplicación se actualiza y pasa la variable de la tienda sin problemas, por lo que sé que me falta algo fundamental sobre cómo manejar esto.