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/21-miscellaneous/02-immutable-data/App.svelte

39 lines
778 B

<svelte:options immutable/>
<script>
import ImmutableTodo from './ImmutableTodo.svelte';
import MutableTodo from './MutableTodo.svelte';
let todos = [
{ id: 1, done: true, text: 'wash the car' },
{ id: 2, done: false, text: 'take the dog for a walk' },
{ id: 3, done: false, text: 'mow the lawn' }
];
function toggle(id) {
todos = todos.map(todo => {
if (todo.id === id) {
// return a new object
return {
id,
done: !todo.done,
text: todo.text
};
}
// return the same object
return todo;
});
}
</script>
<h2>Immutable</h2>
{#each todos as todo}
<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
{/each}
<h2>Mutable</h2>
{#each todos as todo}
<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
{/each}