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组件中未调用时触发的函数

1 个答案: