Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's `bind:` turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields `undefined`, not 0.
Svelte's `bind:` directive turns one-way data flow into a two-way street, letting a child element like an input field directly update a parent's variable. This is how you sync form state without manually writing `on:input` event handlers. It also works for component props and media elements. The main footgun: binding an invalid number input (`type="number"`) sets your variable to `undefined`, not 0 or an empty string, which can lead to `NaN` errors.
Read the original → svelte.dev
- #svelte
- #frontend
- #data-binding
- #reactivity
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.