mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
17 lines
730 B
17 lines
730 B
6 years ago
|
---
|
||
|
|
title: Keyed each blocks
|
||
|
|
---
|
||
|
|
|
||
|
|
By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
|
||
|
|
|
||
|
|
It's easier to show why than to explain. Click the 'Remove first item' button a few times, and notice that it's removing `<Thing>` components from the end and updating the `value` for those that remain. Instead, we'd like to remove the first `<Thing>` component and leave the rest unaffected.
|
||
|
|
|
||
|
|
To do that, we specify a unique identifier for the `each` block:
|
||
|
|
|
||
|
|
```html
|
||
|
|
{#each things as thing (thing.id)}
|
||
|
|
<Thing value={thing.value}/>
|
||
|
|
{/each}
|
||
|
|
```
|
||
|
|
|
||
|
|
The `(thing.id)` tells Svelte how to figure out what changed.
|