0

我正在 Svelte 开发一个用于学习目的的小型 Todo 应用程序（我是 Svelte 新手）。

在 App.svelte 我将TodoItem组件循环导入一个todos数组：

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所示。

我究竟做错了什么？

4

1 回答 1

2

错误“无法读取事物”意味着您正在尝试访问名为“事物”的变量的属性“事物”。
所以在你的情况下..“无法读取未定义的属性标题”意味着您正在尝试访问未定义的属性“标题”。
在您的代码中，我只能看到您尝试访问属性“标题”的一个对象。
t.title.
所以错误是说t变量没有定义。
您的违规代码行是：
{#each todos as t, index}<TodoItem />{/each}.
因为您没有将 TodoItem 发送到它所t期望的变量。
将其更改为：
{#each todos as t, index}<TodoItem t/>{/each}

于 2020-10-02T22:10:34.610 回答