我为Address
提供了一个苗条的组件,用户可以通过单击一个按钮来添加多个收件人(主要,次要等)。我不知道用户会添加多少个地址。我正在努力用Svelte进行建模。我发现最接近的东西是svelte:component
,但一次只能加载一个组件。
答案 0 :(得分:0)
您可以将所有地址保留在一个数组中,并为该数组中的每个元素呈现一个Address
组件,并使用例如从组件发出的事件。
示例(REPL)
<!-- App.svelte -->
<script>
import Address from './Address.svelte';
let addresses = [''];
function addAddress() {
addresses = [...addresses, ''];
}
function changeAddress(address, index) {
addresses = addresses.map((a, i) => (i === index ? address : a));
}
</script>
{#each addresses as address, index}
<Address value="{address}" on:change="{e => changeAddress(e.target.value, index)}" />
{/each}
<button on:click="{addAddress}">Add address</button>
<!-- Address.svelte -->
<script>
export let value = '';
</script>
<div>
<input {value} on:change />
</div>