bind_not_bindable error
The error 'A component is attempting to bind to a non-bindable property' occurs when trying to bind to a property that is not marked as bindable. To mark a property as bindable, use `let { %key% = $bindable() } = $props()`.
Svelte · Language · all subjects
core/runes: $bindable
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
$bindable rune for two-way prop binding
Props in Svelte ordinarily flow one way, from parent to child. The $bindable rune marks a prop as bindable, allowing data to flow both up from child to parent and down from parent to child. This enables two-way binding of component props.
$bindable syntax in component props
To mark a prop as bindable, use the $bindable rune in the props destructuring: let { value = $bindable(), ...props } = $props();. The $bindable rune can optionally take a default fallback value, like $bindable('fallback').
$bindable enables state mutation in child components
When a prop is marked as $bindable, a state proxy can be mutated in the child component. This allows the child to modify the bound value directly.
Parent component uses bind: directive with $bindable props
A parent component can use the bind: directive (e.g., bind:value={message}) to bind to a child component's $bindable prop. This creates a two-way connection where both parent and child share the same value.
Parent can pass normal prop without bind: to $bindable child prop
A parent component does not have to use the bind: directive when passing a value to a $bindable prop. It can pass a normal prop instead if it doesn't need to listen to changes from the child.
$bindable fallback values require parent to pass a value for bind:
When a $bindable prop has a fallback value specified, the parent must pass a value other than undefined if it uses the bind: directive. This avoids ambiguity about which value should apply, since parent and child must share the same value for a binding.
Warning about mutating props without $bindable
Mutation of regular props without the $bindable rune is possible but strongly discouraged. Svelte will warn if it detects that a component is mutating state it does not 'own'.
Example of $bindable child component
Example showing FancyInput.svelte: ```svelte <script> let { value = $bindable(), ...props } = $props(); </script> <input bind:value={value} {...props} /> <style> input { font-family: 'Comic Sans MS'; color: deeppink; } </style> ``` This component receives a bindable 'value' prop and binds it to an input element.
Example of parent binding to $bindable child prop
Example showing App.svelte: ```svelte <script> import FancyInput from './FancyInput.svelte'; let message = $state('hello'); </script> <FancyInput bind:value={message} /> <p>{message}</p> ``` This parent component uses bind:value={message} to bind its $state to the child's $bindable prop, creating two-way binding.
$bindable rune for component props
To mark a property as bindable, use the $bindable() rune. Declaring a property as bindable means it can be used using bind:, not that it must be used using bind:. Bindable properties can have a fallback value. This fallback value only applies when the property is not bound. When the property is bound and a fallback value is present, the parent is expected to provide a value other than undefined, else a runtime error is thrown.