動態建立新元件在 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} 需要一個金鑰，參見文件。