从选择输入列表中删除元素时，选择输入采用先前选择输入的值答案

【问题标题】：Select input takes value of previous select input when removing element from list of select inputs从选择输入列表中删除元素时，选择输入采用先前选择输入的值
【发布时间】：2021-03-24 00:24:28
【问题描述】：

我在 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元素的值，但这似乎并没有解决我的问题。

谁能指出我正确的方向？

【问题讨论】：

标签： javascript html svelte svelte-3

【解决方案1】：

为了解决这个问题，您在 Home.svelte 中的代码应该对每个块使用一个键控。目前，Svelte 不会从 DOM 中删除之前的选择输入，而只是更改它的值。因此，旧的输入值将在“新”选择元素中被预选。为确保 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 Properly Delete Item From List

【讨论】：