Skip to content

Bindings don't work inside {#each reactiveThing as thing} #2444

Closed
@Rich-Harris

Description

@Rich-Harris

In a case like this...

{#each filtered as todo}
	<label class:done={todo.done}>
		<input type="checkbox" bind:checked={todo.done}>
		{todo.text}
	</label>
{/each}

<p>completed {todos.filter(t => t.done).length} of {todos.length}</p>

...where filtered is derived from todos, toggling an individual input doesn't affect anything else that depends on todos. Demo here.

That's because this code gets generated:

function input_change_handler_1({ todo, each_value, todo_index }) {
	each_value[todo_index].done = this.checked;
	$$invalidate('filtered', filtered);
}

We should instead invalidate the ultimate dependencies of filtered rather than filtered itself:

function input_change_handler_1({ todo, each_value, todo_index }) {
	each_value[todo_index].done = this.checked;
-	$$invalidate('filtered', filtered);
+	$$invalidate('todos', todos);
+	$$invalidate('hideDone', hideDone);
}

(While hideDone doesn't need to be invalidated here, I'm not certain we can reliably determine that statically. Needs more thought.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions