Estoy tratando de actualizar un componente secundario con un bucle {#each} dentro de él para agregar elementos adicionales al push() a la matriz que itera el componente secundario. Mientras que una variable individual (por ejemplo, una cadena o un número) funciona bien, una matriz que alimenta un bucle {#each} no parece hacerlo.
Estoy usando un bind: para pasar datos en vivo al componente secundario y también he intentado usar una declaración de $: array en el elemento secundario. Haga lo que haga, empujar nuevos datos a la matriz en el padre no tiene ningún efecto en el hijo, ¿hay alguna manera de hacer esto o tengo que separarme y volver a renderizar todo el ciclo del componente secundario {#each} cada vez?
He publicado mi script de prueba en un REPL: https://svelte.dev/repl/e1f24f8fccfa4533a1d682d163af9a66?version=3.49.0
Escriba el texto en el cuadro de entrada y presione el botón 'Notar esto'.
Si observa la consola JS, puede ver que la matriz se expande, pero el bucle {#each} no está representando los elementos adicionales en el componente secundario.
Svelte funciona de una manera en la que solo detecta actualizaciones de la asignación. Puede leer más sobre esto aquí: https://svelte.dev/docs#component-format-script-2-assignments-are-reactive . El uso de métodos como push no activará automáticamente las actualizaciones.
En su caso, simplemente puede agregar testData = testData después de presionar el nuevo objeto y funciona bien.