'Is it possible in Svelte to have #each loops with two-way binding to nested object values?
The following Svelte code works fine:
<input bind:value='options.name.value' placeholder='{{options.name.placeholder}}'>
<p>Hello {{options.name.value || 'stranger'}}!</p>
Using this JSON:
{
"options": {
"name": {
"value": "",
"placeholder": "enter your name"
}
}
}
You can see it in action. But what if we want to loop over options
with an #each
array...is that possible?
It almost works if we do everything except the bind:
{{#each Object.keys(options) as option}}
<input bind:value='options.name.value' placeholder='{{options[option].placeholder}}'>
<p>Hello {{options[option].value || 'stranger'}}!</p>
{{/each}}
You can see that the placeholder is correct, and the two-way binding works correctly. But the code is not correct yet, because options.name
is hard-coded in for the bind, instead of using the loop value. If we try to fix that, putting bind:value='options[option].value'
, we get a syntax error, Expected '
.
So, if it's possible to two-way bind within a loop using the loop value, what's the correct syntax?
Solution 1:[1]
The short answer is that yes, it's absolutely possible to use two-way binding inside an each
block, but the value of the block has to be a straightforward array, rather than the outcome of an expression like Object.keys(options)
:
{#each options as option}
<input bind:value={option.value} placeholder={option.placeholder}>
{/each}
{
"options": [
{
"id": "name",
"value": "",
"placeholder": "enter your name"
},
{
"id": "email",
"value": "",
"placeholder": "enter your email"
}
]
}
The longer answer, in which I think aloud for a few moments: using an expression (that isn't just a reference like foo
or non-computed member expression like foo.bar
) for two-way binding is an interesting challenge. There are actually two separate issues: firstly, distinguishing between valid expressions like options[option].value
and expressions that wouldn't make any sense in a two-way binding context. Secondly, the each
block expression creates a sort of barrier — if someone were to do this...
{#each Object.keys(options) as option}
<input bind:value={option}>
{/each}
...they'd be binding to a value that is essentially read-only. But you can't tell that just from looking at the syntax. So the static analysis would need to be smart enough to understand that binding to options[option].name
is valid but binding to option
isn't. Something for us to think about.
Finally, the secret option is to not use two-way binding in this context, since it's really just a convenient wrapper around event listeners:
<script>
let options = {
name: {
value: '',
placeholder: 'enter your name'
}
};
function updateValue(option, value) {
options[option].value = value;
}
</script>
{#each Object.keys(options) as option}
<input
on:input="{() => updateValue(option, e.target.value)}"
placeholder={options[option].placeholder}
>
{/each}
Solution 2:[2]
<script>
let options = {
name: {
value: '',
placeholder: 'enter your name'
},
};
$: console.table(options)
</script>
{#each Object.entries(options) as [key, option]}
<input
bind:value={option.value}
placeholder={option.placeholder}
>
{/each}
https://svelte.dev/repl/a77dd18da023469da962d873e6fb391f?version=3.47.0
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Sateesh |