动态创建新组件在 svelte 中不起作用

Question

所以我试图在按下按钮时创建一个新组件。

这是按钮所在的位置：

<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 必须是字符串，这就是它们的本质。但我总是对这三个道具没有定义。

我根本不知道这段代码有什么问题，如果你有解决方案或其他方法来做到这一点，我会采取一切:)

Answer 1

道具作为属性 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} 需要一个密钥，参见文档。