在 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，我无法重现您提到的其他问题

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

Function triggered when not called in Svelte component

javascript

svelte