2

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

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

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

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

在TodoItem.svelte我有：

<script>
    import { createEventDispatcher } from 'svelte';
    export let index;
    export let t;
    export let id;
    export let title;
    export let completed;
    
    //more code here
</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>

在控制台中，我收到类似这样的错误"<TodoItem> was created without expected prop 'index'"，正如这个REPL所示。

更新

我替换{#each todos as t, index}<TodoItem t/>{/each}为，{#each todos as t, index}<TodoItem t index={index} id={t.id} title={t.title} completed=false />{/each}但我仍然得到undefined标题。

什么不见​​了？

4

1 回答 1

0

您不提供index组件作为道具。将您的组件调用更改为<Todoitem {t} {index}/>或更改export let index为let index，然后该组件不需要索引属性。
编辑：修复了速记代码以更正那些，即。{t}

于 2020-10-04T11:39:01.643 回答