为什么编辑按钮不起作用？ 苗条

Question

在下面的代码中，为什么个别待办事项的edit按钮不起作用？ 我将它绑定到 function editTodo ， isEdited object 属性设置为 true。

它在我声明 function 内联时起作用，例如： <button on:click='{() => isEdited = true}> ，但不是通过分隔 function ( <button on:click='{() => editTodo(isEdited)}> ）。

谁能解释为什么会这样并调整下面的代码，以便编辑可以使用单独的 function？

编码：

<script>
    let todos = [
        {
            desc: 'Get some groceries for cooking',
            isDone: false,
            isEdited: false,
        },
        {
            desc: 'Wash the dishes and clean the house',
            isDone: false,
            isEdited: false,
        },
    ];
    
    let newTodo;
    function createTodo() {
        todos = [...todos, {desc: newTodo, isDone: false, isEdited: false}];
        newTodo = null;
    }
    
    function editTodo(isEdited) {
        isEdited = true;
    }
    
    function deleteTodo(desc) {
        todos = todos.filter(todo => todo.desc !== desc);
    }
    
    $: console.log(todos);
</script>

<h1>
    Todoapp
</h1>
<form on:submit|preventDefault='{createTodo}'>
    <label for='create-todo' class='create-todo-label'>
        Create a new todo:
    </label>
    <input bind:value='{newTodo}' type='text' placeholder='Do something' id='create-todo' required />
    <button>
        Create
    </button>
</form>

{#if todos.length !== 0}
    <h2>
        Your todos:
    </h2>
{/if}

<ul>
    {#each todos as {desc, isDone, isEdited}, index}
        <li>
            <label for='{index}' class:done='{isDone}'>
                {desc}
            </label>
            <input id='{index}' bind:checked='{isDone}' type='checkbox' />
        </li>
    
        <button on:click={() => editTodo(isEdited)}>
            Edit
        </button>
        {#if isEdited}
            <textarea cols='30' rows='5' bind:value='{desc}' />
        {/if}
    
        <button on:click='{() => deleteTodo(desc)}'>
            Delete
        </button>
    {/each}
</ul>

<style>
    .create-todo-label {
        margin-block-end: 0.25rem;
    }
    
    label {
        max-inline-size: fit-content;
    }
    
    label.done {
        text-decoration: line-through;
    }
</style>

Answer 1

我不是一个苗条的专家，但是在查看您的代码时，您只是发送参数并将参数更改为 true，这不会反映在实际的 todos 数组中，我尝试了以下方法并且它有效

<button on:click={() => editTodo(index)}>
  Edit
</button>

function editTodo(index) {      
  todos[index].isEdited = true;
}

Answer 2

Svelte 在这里做了一些在常规 JS 中不起作用的事情，即解构 object，然后修改解构后的属性不会影响源 object。 因此， bind:checked='{isDone}'起作用的事实比editTodo不起作用更出乎意料。

像 editTodo 一样声明editTodo会创建一个新的词法 scope，其中的参数与其最初所指的内容分离。 在普通 JS 中，为 function 参数分配一个新值只会对参数的原始来源没有任何作用。

这里似乎也是如此。 通过调用 function，Svelte 在值与其源之间的神奇关联被打破。

您可以使用 ID 或索引在数组中找到正确的元素并对其进行更新。 或者，您可以传递项目并将其替换为更新版本（使用 object 标识来查找它，而不是 ID 或索引），而不是解构项目。