svelte - 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} 中使用它。

关于如何解决这个问题的任何建议？

score 3 · Accepted Answer

块的值each应该是一个数组（或类似数组的对象，即它有一个length属性）。所以你可以这样做Array(quantity)，像这样：

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

1 回答 1