La création dynamique de nouveaux composants ne fonctionne pas dans svelte

Question

J'essaie donc de créer un nouveau composant lorsqu'un bouton est enfoncé.

C'est ici que se trouve le bouton :

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

La fonction appelée est la suivante :

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

Ces trois accessoires doivent être des ficelles, c'est ce qu'ils sont. Mais je n’ai toujours aucune définition de ces trois accessoires.

Je n'ai aucune idée de ce qui ne va pas avec ce code, si vous avez une solution ou une autre façon de faire cela, je prendrai tout :)

Answer 1

Props comme attributs props Réussi :

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

Documentation

(En supposant que ce soient les noms de propriétés corrects.)

Mais comme mentionné ci-dessus, ce n'est pas comment créer une liste de tâches dans Svelte. Les données doivent être ajoutées à la liste et les éléments doivent être créés de manière déclarative en utilisant {#each} .

à peu près comme suit :

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

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

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

Si vous ajoutez/supprimez des éléments au milieu, {#each}une clé est requise, voir documentation.