Skip to content
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

Closed
VishalAkhouri opened this issue May 18, 2017 · 3 comments
Closed

Rendering updated nested components with #each #589

VishalAkhouri opened this issue May 18, 2017 · 3 comments

Comments

@VishalAkhouri
Copy link

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)
  • messages input gets updated by firing the custom event (this is desired behaviour)
  • #each re-renders the components with the updated inputs (in this case updated messages)
  • but at the same time the 3rd message which is now 2nd message in the updated array also gets visible flag updated to false (which is not desired and looks like a bug with regards to svelte retaining this references for updated array when rendering `#each')
@Rich-Harris
Copy link
Member

This was discussed on Gitter, but the tl;dr for anyone finding their way here is that providing a key for your each block solves this issue:

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}}

Ref sveltejs/v2.svelte.dev#24

@Rich-Harris
Copy link
Member

Closing this, since keyed each blocks are now documented

@diazproduction
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants