You can even bind to properties inside an each
block.
<input
type=checkbox
bind:checked={todo.done}
>
<input
placeholder="What needs to be done?"
bind:value={todo.text}
>
Note that interacting with these
<input>
elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
App.svelte
xxxxxxxxxx
50
1
<script>
2
let todos = [
3
{ done: false, text: 'finish Svelte tutorial' },
4
{ done: false, text: 'build an app' },
5
{ done: false, text: 'world domination' }
6
];
7
8
function add() {
9
todos = todos.concat({ done: false, text: '' });
10
}
11
12
function clear() {
13
todos = todos.filter(t => !t.done);
14
}
15
16
$: remaining = todos.filter(t => !t.done).length;
17
</script>
18
Console
xxxxxxxxxx
221
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
destroy_each,
7
detach,
8
element,
9
init,
10
insert,
11
listen,
12
noop,
13
run_all,
14
safe_not_equal,
15
set_data,
16
space,
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
.done.svelte-7raotd{opacity:0.4}