When todos
or showCompleted
change, visibleTodos
will be updated.
<script>
import Todo from './Todo.svelte';
import AddTodo from './AddTodo.svelte';
let todos = [];
let showCompleted = false;
$: visibleTodos = showCompleted
? todos
: todos.filter((todo) => todo.completed);
function addTodo(task) {
todos = todos.concat([{
task,
completed: false,
}]);
}
</script>
{#each visibleTodos as todo}
<Todo {...todo} />
{/each}
{#if showCompletedTodos}
<button on:click={() => showCompleted = false}>
Hide completed
</button>
{:else}
<button on:click={() => showCompleted = true}>
Show completed
</button>
{/if}