所以我试图在按下按钮时创建一个新组件。
这是按钮所在的位置：
<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}需要一个密钥，参见文档。