Penciptaan komponen baharu secara dinamik tidak berfungsi secara ringkas

Question

Jadi saya cuba mencipta komponen baharu apabila butang ditekan.

Di sinilah butangnya:

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

Fungsi yang dipanggil adalah ini:

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

Ketiga-tiga prop ini mestilah bertali, itulah yang ada. Tetapi saya selalu tidak mempunyai definisi mengenai ketiga-tiga prop ini.

Saya tidak tahu apa yang salah dengan kod ini sama sekali, jika anda mempunyai penyelesaian atau cara lain untuk melakukan ini, saya akan mengambil semuanya :)

Answer 1

Props sebagai atribut props Lulus:

new Task({
  target: document.querySelector('#basic-todos'),
  props: {
    todoContent,
    todoColor,
    todoImportance,
  },
});

Dokumentasi

(Andaikan ini adalah nama hartanah yang betul.)

Tetapi seperti yang dinyatakan di atas, ini bukan cara membuat senarai tugasan dalam Svelte. Data hendaklah ditambahkan pada senarai dan item hendaklah dibuat secara deklaratif menggunakan {#each} .

kira-kira seperti berikut:

let items = [];
// ...
const createTodo = () => {
  // [collect/prepare data]

  items = [...items, item];
};

{#each items as { content, color, importance }}
  
{/each}

Jika anda menambah/mengalih keluar item di tengah, {#each} kunci diperlukan, lihat dokumentasi.