SvelteJS：动态添加N个组件，其中N是输入元素的整数值

Question

使用SvelteJS v2.16.1。 尝试动态添加N个componenet，其中N是在输入元素中输入的值。 现在大致是这样的：

<input min="1" type="number" bind:value="quantity"/>
<script>
export default {
  data() {
    return {
      quantity: 1
    }
  }
}
</script>

我想在{#each}之类的地方使用{quantity}来动态创建新元素。 像这样：

<input min="1" type="number" bind:value="quantity"/>
{#each quantity as i}
  <input type="text />
{/each}

但是{quantity}是一个整数值，所以我不能在{#each}中使用它。

关于如何处理此问题的任何建议？

Answer 1

each块的值应为数组（或类似数组的对象，即它具有length属性）。因此，您可以像这样操作Array(quantity)：

<input min="1" type="number" bind:value="quantity"/>
{#each Array(quantity) as i}
  <input type="text">
{/each}

REPL demo。