Функция срабатывает, когда не вызывается в компоненте Svelte - PullRequest
Новая
       17

Функция срабатывает, когда не вызывается в компоненте Svelte

0 голосов
/ 23 июня 2019

Я пробую 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 запускается для каждой задачи при загрузке страницы и больше не работает, когдаустановлены флажки
  • Фильтрация всего задания просто не работает
  • Когда я добавляю задание, оно сразу завершает последнее

У меня такое чувствоЯ мог что-то упустить в какой-то момент, и это вызывает все эти проблемы, но не могу найти, что.

1 Ответ

1 голос
/ 23 июня 2019

Итак, вы упустили то, что вам нужно передать функцию обратного вызова в on:change обработчик событий, то есть on:change={() => updateTask(task)}.Прямо сейчас он просто звонит updateTask немедленно.Вот обновленный REPL , я не смог воспроизвести другие упомянутые вами проблемы

...