моя отправка события запускается только один раз, когда форма отправляется в svelte js, почему? - PullRequest
Новая
       28

моя отправка события запускается только один раз, когда форма отправляется в svelte js, почему?

0 голосов
/ 11 января 2020

Мой код - данные выборки и помещают их в карту, все в порядке, мое событие - когда я добавляю данные во входные данные, перемещаю их в данные выборки в карте, это запускается еще раз, когда я добавляю больше данных, добавляемых в базу данных, но он не перемещается в списке данных? код:

Taskform.svelte 

<script>
    import { createEventDispatcher } from "svelte";

    let title = '';

    let dispatch = createEventDispatcher();

    function addTask(){
        axios.post('./api/tasks', {title: title});
        dispatch('taskCreated', {
            title: title,
        });
        title = '';
    }

</script>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card mt-2 bg-dark text-light">
            <div class="card-header">Create Task</div>

            <div class="card-body">
                <form action="./api/tasks" method="POST" on:submit|preventDefault={addTask}>
                    <div class="form-group">
                        <input type="text" name="title" placeholder="Task Title" class="form-control" bind:value={title}>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Add Task" class="btn btn-primary">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Список задач 

<script>
    import { onMount } from 'svelte';
    import Task from './Task.svelte';
    let tasks = [];

        onMount(async (event) => {
            axios.get('./api/tasks')
                .then((response) => {
                    tasks = response.data;
                });
        });

        function handler(event){
            tasks = [...tasks, {
                title: event.detail.title
            }];
        }    



</script>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card mt-2 bg-primary text-light">
            <div class="card-header">List Of Tasks</div>
            <div class="card-body">
                <ul>
                   <div class="row"> 
                        {#each tasks as task (task.id)}
                            <div class="col-3">
                                <li>{task.title}</li> 
                            </div>               
                        {/each} 
                    </div>
                </ul>
            </div>
        </div>
    </div>
</div>

<Task on:taskCreated={handler}/>

пожалуйста, помогите, я пробовал так много способов ничего не получалось. спасибо

1 Ответ

0 голосов
/ 12 января 2020

Ваша отправка называется ожидаемой.
Проблема связана с отсутствием id в ваших задачах. Если вы добавите уникальный id к каждой задаче, все будет работать (вы можете удалить (task.id) в вашем #each для проверки).

...