如何刪除綁定跟隨 Svelte 中的事件？

Question

我正在使用 Svelte 開發一個簡單的 Todo 應用程序。 我最近添加了一些編輯功能，這是一個小錯誤。 最初只有一個帶有提交按鈕的輸入。 在底層，todo 是使用bind:value在輸入值和變量 todo 之間綁定的。

在我添加編輯功能之前，我沒有注意到這個錯誤。 但是，點擊提交按鈕后，todo 和輸入框之間的綁定並沒有消失。 我很好奇是否有辦法刪除作為事件副作用的綁定？

應用程序

<script>
  import AddTodo from "./AddTodo.svelte";
  import DisplayTodoItem from "./DisplayTodoItem.svelte";
  let todoItems = [];

  const handleTodoButtonClick = event => {
    todoItems = [...todoItems, event.detail.value];
  };

  const handleDeleteButtonClick = event => {
    todoItems = todoItems.filter(value => value != event.detail.value);
  };
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
  <AddTodo on:addTodoMessage={handleTodoButtonClick}/>
  {#each todoItems as item}
    <DisplayTodoItem item={item} on:deleteItemMessage={handleDeleteButtonClick}/>
  {/each}
</main>

添加待辦事項

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  let todo;
</script>

<input bind:value={todo}>
<button on:click={ ()=>{dispatch('addTodoMessage', {value:todo})} }> submit  </button>

顯示待辦事項

<script>
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
 export let item;
 let notEdit = true;
</script>

{#if notEdit}
<div style="display: inline;">
  <h1> {item} </h1>
  <button on:click={ () => dispatch('deleteItemMessage', {value:item} )}>
    delete 
  </button>

  <button on:click={()=> notEdit=false}> edit</button>
</div>

{:else}
<input bind:value={item}/>
<button on:click={()=> notEdit=true}> Done editing </button>

{/if}

理想情況下，在單擊提交並將待辦事項添加到數組 todoItems 之后，綁定將被刪除，這樣以后當編輯 todoItems 時就不會出現錯誤行為。

這可能嗎？

Answer 1

該項目未綁定，因此更改未保存在列表中，您需要：

<DisplayTodoItem bind:item .../>

否則，任何更新都將加載添加項目時的原始值。 它與添加輸入無關，那是完全獨立的。

（此外，當不只是從末尾刪除項目時，應該使用鍵控{#each}並且刪除將刪除具有相同值的所有項目。如果項目是原始值，則可以將其切換為基於索引。）