Das dynamische Erstellen neuer Komponenten funktioniert in Svelte nicht

Question

Ich versuche also, eine neue Komponente zu erstellen, wenn eine Taste gedrückt wird.

Hier ist der Button:

<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>

Die aufgerufene Funktion ist diese:

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,
    });
  };

Diese drei Requisiten müssen Schnüre sein, das sind sie. Aber ich habe immer keine Definition dieser drei Requisiten.

Ich habe überhaupt keine Ahnung, was an diesem Code falsch ist. Wenn Sie eine Lösung oder eine andere Möglichkeit haben, dies zu tun, nehme ich alles :)

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} 需要一个密钥，参见文档。