Réinitialiser — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 4)

Réinitialiser

Formulaires · niveau 2

Énoncé

Après l'envoi d'un formulaire (nom, quantité, rayons cochés), le vider pour une nouvelle saisie. Écrire une fonction etatInitial() et l'utiliser deux fois. Pourquoi une fonction plutôt qu'une constante INITIAL recopiée avec Object.assign(f, INITIAL) ?

Corrigé


const { createApp, reactive } = Vue;

// Une FONCTION qui fabrique un état neuf : jamais deux formulaires ne partagent le même tableau.
function etatInitial() {
  return { nom: "", quantite: 1, rayons: [] };
}

createApp({
  setup() {
    const f = reactive(etatInitial());
    function envoyer() {
      console.log("envoyé :", JSON.stringify(f));
      Object.assign(f, etatInitial());
    }
    return { f, envoyer };
  },
}).mount("#app");

Après une saisie et l'envoi, la console puis l'état affiché :


envoyé : {"nom":"Awa","quantite":2,"rayons":["Littérature"]}
{
  "nom": "",
  "quantite": 1,
  "rayons": []
}

Object.assign recopie les propriétés une à une : avec une constante, f.rayons deviendrait le même tableau que INITIAL.rayons, et cocher une case modifierait la constante elle-même ; la réinitialisation suivante ne viderait plus rien. Une fonction fabrique un tableau neuf à chaque appel.