I am trying to update a child component with an {#each} loop inside it to add additional items by push()ing them to the array that is iterated by the child component. While an individual variable (say a string or number) works fine and array that feeds a {#each} loop doesn't seem to.
I am using a bind: to pass live data to the child component and have also tried to use a $: array statement in the child. Whatever I do, pushing new data to the array in the parent has no effect on the child, is there a way to do this or do I have to split off and re-render the whole child component {#each} loop every time?
I have posted my test script in a REPL: https://svelte.dev/repl/e1f24f8fccfa4533a1d682d163af9a66?version=3.49.0
Type text in to the input box and hit the 'Note This' button.
If you watch the JS Console you can see the array expanding, but the {#each} loop is not rendering the extra items to the child component.
Svelte works in a way where it only detects updates from assignment. You can read more about it here: https://svelte.dev/docs#component-format-script-2-assignments-are-reactive. Using methods such as push won't automatically trigger updates.
In your case you can just add testData = testData after pushing the new object and it works fine.