javascript - Svelte 组件中未调用时触发的函数

Question

我正在通过构建一个简单的待办事项应用程序来尝试 Svelte。这是整个组件:

<script>
    let newTask = '';
    let showCompleted = true;

    let tasks = [{
        name: 'Test task',
        completed: false
    },
    {
        name: 'Test task 2',
        completed: true
    }];

    $: filterTasks = tasks.filter(task => showCompleted === true ? true : task.completed === false);

    function addTask() {
        tasks = [...tasks, {
            name: newTask,
            completed: false
        }];
        newTask = '';
    };

    function updateTask(updatedTask) {
        tasks = tasks.map(task => {
            if(task === updatedTask) {
                return {...updatedTask, completed: !task.completed};
            } else {
                return task;
            }
        });
    };
</script>

<h1>To-do</h1>

<label><input type="checkbox" bind:checked={showCompleted}> Show completed</label>

<ul>
    {#each filterTasks as task}
        <li>
            <input type="checkbox" checked={task.completed} on:change={updateTask(task)}>
            {task.name}
        </li>
    {/each}
</ul>

<input type="text" bind:value="{newTask}">
<button on:click|preventDefault={addTask}>Add</button>

但我遇到了多个问题:

• updateTask 在页面加载时为每个任务触发，并且在单击复选框时不再起作用
• 对完整任务的过滤不起作用
• 当我添加任务时，它直接完成最后一个任务

我有一种感觉，我可能在某个时候错过了一些东西，并且它导致了所有这些问题，但是，无法找到什么。

Answer 1

所以您错过的是您需要将回调函数传递给 on:change 事件处理程序，即 on:change={() => updateTask(task)}。现在它只是立即调用updateTask。这是updated REPL ，我无法重现您提到的其他问题