愿所有的美好和期待都能如约而至

在Svelte中,有没有可能让#each循环双向绑定到嵌套的对象值?

发布时间:  来源:互联网  作者:匿名  标签:each error Is it possible in Svelte to have #each loops with two-way binding to   热度:37.5℃

本文介绍了在Svelte中,有没有可能让#each循环双向绑定到嵌套的对象值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下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占位符正确,并且双向绑定工作正常。但是代码还不正确,因为options.name是为绑定硬编码的,而不是使用循环值。如果try to fix that放入bind:value='options[option].value',则会出现语法错误Expected '

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

推荐答案

答案是肯定的,在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}

这篇关于在Svelte中,有没有可能让#each循环双向绑定到嵌套的对象值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP