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

问题描述

我正在通过构建一个简单的待办事项应用程序来尝试 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在页面加载时为每个任务触发，并且在单击复选框时不再起作用
完整任务的过滤不起作用
当我添加一个任务时，它直接完成最后一个

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

标签： javascriptsvelte

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

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

问题描述

解决方案

推荐阅读