在 Svelte 中是否有可能让 #each 循环与嵌套对象值的双向绑定？

Question

以下 Svelte 代码运行良好：

<input bind:value='options.name.value' placeholder='{{options.name.placeholder}}'>
<p>Hello {{options.name.value || 'stranger'}}!</p>

使用这个 JSON:

{
    "options": {
        "name": {
            "value": "",
            "placeholder": "enter your name"
        }
    }
}

You can see it in action。但是，如果我们想用 #each 数组遍历 options 怎么办……这可能吗？

它几乎如果我们做除了绑定之外的所有事情:

{{#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，输入bind:value='options[option].value'，我们得到一个语法错误，Expected '.

那么，如果可以使用循环值在循环内进行双向绑定，那么正确的语法是什么？

Answer 1

简短的回答是的，绝对可以在 each 块中使用双向绑定，但块的值必须是直接数组，而不是像 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"
    }
  ]
}

较长的答案，我在其中大声思考了一会儿：使用表达式（这不仅仅是像 foo 或非计算的引用像 foo.bar) 这样的成员表达式用于双向绑定是一个有趣的挑战。实际上有两个不同的问题：首先，区分像 options[option].value 这样的有效表达式和在双向绑定上下文中没有任何意义的表达式。其次，each 块表达式创建了一种障碍——如果有人要这样做...

{#each Object.keys(options) as option}
  <input bind:value={option}>
{/each}

...它们将绑定到本质上是只读的值。但是你不能仅仅通过查看语法来判断。因此，静态分析需要足够聪明，才能理解绑定到 options[option].name 是有效的，但绑定到 option 则不是。值得我们深思。

最后，秘密选项 是 not use two-way binding in this context，因为它实际上只是一个方便的事件侦听器包装器：

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

Answer 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

在 Svelte 中是否有可能让 #each 循环与嵌套对象值的双向绑定？

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

javascript

each

object

svelte