-
-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rendering updated nested components with #each #589
Comments
This was discussed on Gitter, but the tl;dr for anyone finding their way here is that providing a key for your https://svelte.technology/repl?version=1.20.2&gist=168a4c271b67ca9c93a19dae0d4e058d -{{#each messages as msg, index}}
+{{#each messages as msg, index @id}}
<Nested id="{{index}}" message="{{msg.message}}" on:closed="remove(msg)" />
{{/each}} |
Closing this, since keyed each blocks are now documented |
Hi! @Rich-Harris Could you add how to use both index and key at the same time to the documentation as well like you have in your comment from 24 May? (Perhaps as a note for the Keyed Each Blocks section?) It wasn't very intuitive for me to find out how to use both and it might be helpful to have it documented. |
Scenario: I am using
#each
for rendering nested components.Inside the nested component, I am setting a flag 'visible' to hide that component's instance (required for using 'svelte-transitions') and also firing an event to update the messages array (removing the closed message from the array).
Gist: https://svelte.technology/repl?version=1.20.2&gist=db63b77352b1d3faf862cdcbef3bf8d8
Issue: If I close say 2nd message, following happens:
this.set({visible: false})
sets the 2nd message as visible: false (this is desired behaviour)#each
re-renders the components with the updated inputs (in this case updated messages)this
references for updated array when rendering `#each')The text was updated successfully, but these errors were encountered: