当从选择输入列表中删除元素时，选择输入采用上一个选择输入的值

Question

我在Svelte中创建了一个选择输入的列表。目标是选择一个日期并批准该日期的项目。在选择新日期的情况下，应将该项目从"日期"中删除；当前"；列表并附加到"；批准"；列表请参阅下面的代码。

Home.svelte:

{#each $dummyStore.currentStates as currentState}
<ListItem {currentState}/>
{/each}

ListItem.svelte:

<script>
import {dummyStore} from "../stores/dummyStore";
export let currentState;
</script>
<div>
<div class="columns">
<div class="column">
<p>
{currentState.id}
</p>
</div>
<div class="column">
<p>
{currentState.name}
</p>
</div>
<div class="column">
<select id={currentState.id}
name={currentState.id}
on:change={e => dummyStore.addApprovedDate(currentState.id, e.target.value)}>
<option disabled selected value> -- select an option --</option>
{#each currentState.available_dates as date}
<option value={date}>{date}</option>
{/each}
</select>
</div>
</div>
</div>

每当我选择一个日期时，该项目将从$dummyStore.currentStates中删除，并附加到另一个"日期"；批准"；列表但是，选择输入列表中的下一个项目将具有预先选择的上一个项目的值。我最初认为这是因为我没有绑定select元素的值，但这似乎并不能解决我的问题。

有人能给我指正确的方向吗？

Answer 1

为了解决这个问题，Home.svelte中的代码应该使用一个键控的每个块。目前，Svelte不会从DOM中删除以前的select输入，而只是更改其值。因此，旧的输入值将在"；新的"；select元素。为了确保Svelte销毁旧元素，您应该使用元素的密钥。

您可以从Svelte文档中看到本教程中的确切问题和解决方案：https://svelte.dev/tutorial/keyed-each-blocks

要解决您的问题，请将Home.svelte中的代码更改为：

{#each $dummyStore.currentStates as currentState (currentState.id)}
<ListItem {currentState}/>
{/each}

请参阅这篇stackoverflow帖子，并提供更详细的解释：Svelte.js-Can'；t从列表中正确删除项目