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

Question

使用 SvelteJS v2.16.1。 尝试动态添加 N 个组件，其中 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.