В чем причина того, что в моем приложении Svelte не удается прочитать свойство "title" неопределенной ошибки?

Я работаю над небольшим приложением Todo в Svelte в учебных целях (я новичок в Svelte).

В App.svelte я импортирую TodoItem компонентный цикл todosarray:

import TodoItem from './TodoItem.svelte';
//more code

{#each todos as t, index}<TodoItem />{/each}

В TodoItem.svelte у меня есть:

<script>
    import { createEventDispatcher } from 'svelte';
    export let index;
    export let t;
    export let id;
    export let title;
    export let completed;
    
    function deleteTodo(tid){
        let itemIdx = todos.findIndex(x => x.id == tid);
        todos.splice(itemIdx,1);
        todos = todos;
    }
    
    function editTodo(tid) {
        isEditMode = true;
        let itemIdx = todos.findIndex(x => x.id == tid);
        currentToDo = todos[itemIdx];
    }
    
    function completeTodo(tid){
        let itemIdx = todos.findIndex(x => x.id == tid);
        let todo = todos[itemIdx];
        todo.completed = !todo.completed;
        todos = todos;
    }
</script>

<tr>
    <td>{index + 1}</td>
    <td class="{t.completed == true ? 'completed' : ''}">{t.title}</td>
    <td class="text-center"><input type="checkbox" checked="{t.completed}" on:change={completeTodo(t.id)}></td>
    <td class="text-right">
        <div class="btn-group">
            <button on:click="{() => editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
            <button on:click="{deleteTodo(t.id)}" class="btn btn-sm btn-danger">Delete</button>
        </div>
    </td>
</tr>

По непонятной причине я получаю Cannot read property 'title' of undefined ошибку в этом компоненте, так как это REPL показывает.

Что я делаю неправильно?


svelte svelte-3 svelte-component svelte-2
person Razvan Zamfir    schedule 02.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ошибка не может прочитать что-то означает, что вы пытаетесь получить доступ к свойству что-то вроде переменной с именем thing.
Итак, в вашем случае ... Невозможно прочитать заголовок свойства undefined означает, что вы пытаетесь получить доступ к заголовку свойства чего-то это не определено.
В вашем коде я вижу только один объект, к которому вы пытаетесь получить доступ к заголовку свойства.
t.title.
Таким образом, ошибка говорит о том, что переменная t не определена .
Ваша оскорбительная строка кода:
{#each todos as t, index}<TodoItem />{/each}.
потому что вы не отправляете TodoItem в ожидаемую t переменную.
Измените ее на:
{#each todos as t, index}<TodoItem t/>{/each}

person 2pha    schedule 02.10.2020