foreach 中每一行的文本输入 table

Question

我有 {#each meData 作为数据} 为了显示一个数组，我需要为每一行获取一个文本输入，它如何定义 bind:value 以便我可以保存和关联不同的值。使用 sveltekit 谢谢

Answer 1

您可以将 bind:value 与数组或对象结合使用。

对于数组方法，您只需使用项目的索引，请注意，如果您的原始数组发生变化（排序、过滤、更新），这可能会变得混乱，因为索引将不同步。

<script>
let values = []
</script>

{#each array as item, i}
  <input type="text" bind:value={values[i]}>
{/each}

另一种方法是使用唯一标识符并绑定到对象的属性。在这里您必须注意，即使项目消失了，这个属性仍然会存在于对象上，这可能是内存泄漏。

<script>
let values = {}
</script>

{#each array as item}
  <input type="text" bind:value={values[item.id]}>
{/each}

丢失的选项当然是简单地对原始数据使用新的属性

{#each array as item}
  <input type="text" bind:value={item._newproperty}>
{/each}

text input for each line in foreach table