所以我試著在按下按鈕時建立一個新元件。
這是按鈕的位置:
<input type="color" id="todo-color" bind:value={todoColor} /> <input type="text" id="todo-content" placeholder="Todo" bind:value={todoContent} /> <input type="checkbox" name="isImportant" id="is-important" bind:checked={todoImportance} /> <button on:click={createTodo}>Create todo</button>
呼叫的函數是這個:
let todoContent: string; let todoColor: string = "#ff0000"; let todoImportance: any = "default"; const createTodo = () => { todoImportance ? (todoImportance = "important") : (todoImportance = "default"); console.log(todoColor, todoContent, todoImportance); new Task({ target: document.querySelector('#basic-todos'), todoContent, todoColor, todoImportance, }); };
這三個 prop 必須是字串,這就是它們的本質。但我總是對這三個道具沒有定義。
我根本不知道這段程式碼有什麼問題,如果你有解決方案或其他方法來做到這一點,我會採取一切:)
P粉7637488062024-04-01 11:32:33
道具作為屬性 props
傳遞:
new Task({ target: document.querySelector('#basic-todos'), props: { todoContent, todoColor, todoImportance, }, });
(假設這些是正確的屬性名稱。)
但如上所述,這不是如何在 Svelte 中建立待辦事項清單。應將資料新增至清單中,並應使用 {#each}
以宣告方式建立項目。
大致如下:
let items = []; // ... const createTodo = () => { // [collect/prepare data] items = [...items, item]; };
{#each items as { content, color, importance }}{/each}
如果在中間新增/刪除項目,{#each}
需要一個金鑰,參見文件。