是什么原因导致在我的 Svelte 应用程序中创建此组件时没有预期的 prop 错误？

Question

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

在 App.svelte 中，我导入 TodoItem 组件循环一个 todosarray:

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 index={index} id={t.id} title={t.title} completed=false />{/each} 替换了 {#each todos as t, index}<TodoItem t/>{/each} 但我的标题仍然是 undefined。

缺少什么？

Answer 1

您没有提供 index 作为组件的 prop。将您的组件调用更改为 <Todoitem {t} {index}/> 或将 export let index 更改为 let index，然后组件不期望 index-property.
编辑：修复了 shorthand 代码以更正代码，即。 {t}

是什么原因导致在我的 Svelte 应用程序中创建此组件时没有预期的 prop 错误？

What causes this component was created without expected prop error in my Svelte app?

svelte

svelte-3

svelte-component

svelte-2

更新