是什么原因导致这个组件在我的Svelte应用程序中创建时没有预期的道具错误

Question

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

缺少什么？

Answer 1

您没有提供index作为组件的道具。将组件调用更改为<Todoitem {t} {index}/>或将export let index更改为let index，则组件不需要索引属性
EDIT：修复了简写代码以更正它们，例如{t}