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}

SvelteJS: Dynamically add N components, where N is the integer value of an input element