本文介绍了在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}}
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循环双向绑定到嵌套的对象值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！