foreach 中每一行的文本输入 table
text input for each line in foreach table
我有
{#each meData 作为数据}
为了显示一个数组,我需要为每一行获取一个文本输入,它如何定义 bind:value 以便我可以保存和关联不同的值。
使用 sveltekit
谢谢
您可以将 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}
我有 {#each meData 作为数据} 为了显示一个数组,我需要为每一行获取一个文本输入,它如何定义 bind:value 以便我可以保存和关联不同的值。 使用 sveltekit 谢谢
您可以将 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}