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/>{/each}替换为{#each todos as t, index}<TodoItem t index={index} id={t.id} title={t.title} completed=false />{/each}，但标题仍得到undefined。

缺少什么？

Answer 1

您没有提供index作为组件的支持。将您的组件调用更改为<Todoitem {t} {index}/>或将export let index更改为let index，则该组件不需要索引属性。
编辑：修正了简写代码以更正那些。 {t}

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

更新

1 个答案: