Is it possible in Svelte to have #each loops with two-way binding to nested object values?

Question

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?

Answer 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}