如何在按钮单击时添加另一个组件

Question

我正在创建数据条目 table。我希望在单击 AddRow 按钮时向 table 添加一个新行。

我的结构是一个 <DataEntryForm> 组件，具有 <FormHeader> 个子组件和一个或多个 <FormRow> 个子组件。

这是我的第一次新手尝试：

let numRows = [1,1,1,1,1,1,1];

<div class='efContainer'>
   <FormHeader />
   {#each numRows as num}
      <FormRow />
   {/each}
</div>

<Button on:click={() => numRows.push(1)}>Add Row</Button>

在初始运行时，根据 numRows 数组初始值的长度指定创建了 7 行。

但是，单击 AddRow 按钮什么都不做 （控制台日志记录显示数组正在正确更新。当然，没有任何内容告诉 #each 循环重新运行.)

应如何重构此应用程序以使 AddRows 按钮起作用？
numRows 数组似乎是管理创建新行的笨拙方法。有没有更 Sveltic 的方法来做到这一点？

Answer 1

更新数组和对象可以参考Svelte教程：https://svelte.dev/tutorial/updating-arrays-and-objects

因为 numRows.push(1) 从不更新 numRows 的值，Svelte 不会检测到更改。一个简单的解决方法是将 on:click={() => numRows.push(1)} 替换为 on:click={updateArray}，其中 updateArray = () => {numRows = [...numRows, 1]}

如何在按钮单击时添加另一个组件

HowTo add another component on button click

svelte