所以我試著在按下按鈕時建立一個新元件。
這是按鈕的位置：
<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 必須是字串，這就是它們的本質。但我總是對這三個道具沒有定義。
我根本不知道這段程式碼有什麼問題，如果你有解決方案或其他方法來做到這一點，我會採取一切:)
道具作為屬性
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}需要一個金鑰，參見文件。