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.
svelte/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte

36 lines
653 B

<script>
import Thing from './Thing.svelte';
let things = [
{ id: 1, color: '#0d0887' },
{ id: 2, color: '#6a00a8' },
{ id: 3, color: '#b12a90' },
{ id: 4, color: '#e16462' },
{ id: 5, color: '#fca636' }
];
function handleClick() {
things = things.slice(1);
}
</script>
<button on:click={handleClick}>
Remove first thing
</button>
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
<div>
<h2>Keyed</h2>
{#each things as thing (thing.id)}
<Thing current={thing.color}/>
{/each}
</div>
<div>
<h2>Unkeyed</h2>
{#each things as thing}
<Thing current={thing.color}/>
{/each}
</div>
</div>