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?
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?
Share Improve this question asked Mar 11, 2017 at 16:31 KevKev 16.3k17 gold badges82 silver badges114 bronze badges2 Answers
Reset to default 17The 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 oute 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-puted 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}
<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