I am working on a small Todo app in Svelte for learning purposes (Im new to Svelte).
In App.svelte I import the TodoItem
component loop a todos
array:
import TodoItem from './TodoItem.svelte';
//more code
{#each todos as t, index}<TodoItem t/>{/each}
In TodoItem.svelte
I have:
<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>
In the console I get errors like this one "<TodoItem> was created without expected prop 'index'"
, as this REPL shows.
UPDATE
I replaced {#each todos as t, index}<TodoItem t/>{/each}
with {#each todos as t, index}<TodoItem t index={index} id={t.id} title={t.title} completed=false />{/each}
but I still get undefined
for the title.
What is missing?
You don’t provide
index
as a prop for component. Change your component call to<Todoitem {t} {index}/>
or changeexport let index
tolet index
, then the component doesn’t expect index-property.EDIT: Fixed the shorthand codes to correct ones ie.
{t}