Formulaires

Jusqu'ici, les données allaient du script vers la page. Un formulaire fait le chemin inverse : le visiteur tape un nom, coche des rayons, choisit un livre, et l'application doit le savoir pendant la saisie, pour calculer un total, signaler une erreur, activer un bouton. Au livre JavaScript, le formulaire de commande de la Librairie lisait les champs à chaque événement input et réécrivait les messages à la main. Vue relie un champ à une donnée dans les deux sens avec une seule directive, v-model ; la validation devient une propriété calculée.

Les valeurs montrées dans ce chapitre ont été relevées dans Chromium, avec Vue 3.5.43, en simulant les saisies décrites (frappes, cases cochées, choix dans les listes) avec l'outil Playwright.

4.1 v-model

<div id="app">
  <p><label>Votre prénom <input type="text" v-model="prenom"></label></p>
  <p><label>Le même, à la main <input type="text" :value="prenom" @input="prenom = $event.target.value"></label></p>
  <p>Bonjour {{ prenom || "inconnu" }} !</p>
  <button type="button" @click="prenom = 'Awa'">Pré-remplir « Awa »</button>
</div>

const { createApp, ref } = Vue;

createApp({
  setup() {
    const prenom = ref("");
    return { prenom };
  },
}).mount("#app");

On tape « Léa » dans le premier champ : le paragraphe, puis la valeur des deux champs. On clique ensuite sur le bouton, et l'on relève les mêmes informations :

Bonjour Léa !
"Léa" "Léa"
Bonjour Awa !
"Awa" "Awa"

La donnée est la seule source de vérité : la valeur initiale du champ est celle de la donnée (un attribut value écrit dans le gabarit serait ignoré), et un bouton « Pré-remplir » n'a qu'à modifier la donnée. Les deux champs, reliés à la même ref, restent toujours identiques.

4.2 Chaque type de champ

La valeur que v-model lit et écrit dépend du champ. Le formulaire suivant les réunit tous ; ses données sont groupées dans un seul objet reactive, et la balise <pre> les affiche au format JSON.

<div id="app">
  <form @submit.prevent>
    <p><label>Avis <textarea v-model="f.avis" rows="2"></textarea></label></p>
    <p><label><input v-model="f.lettre" type="checkbox"> Recevoir la lettre</label></p>
    <fieldset>
      <legend>Rayons préférés</legend>
      <label v-for="r in rayons" :key="r"><input v-model="f.rayons" type="checkbox" :value="r"> {{ r }}</label>
    </fieldset>
    <fieldset>
      <legend>Retrait</legend>
      <label><input v-model="f.retrait" type="radio" value="boutique"> En boutique</label>
      <label><input v-model="f.retrait" type="radio" value="campus"> Livraison campus</label>
    </fieldset>
    <p>
      <label>Format
        <select v-model="f.format">
          <option disabled value="">— choisir —</option>
          <option value="broche">Broché</option>
          <option value="poche">Poche</option>
        </select>
      </label>
    </p>
    <p>
      <label>Langues
        <select v-model="f.langues" multiple>
          <option>Français</option>
          <option>Anglais</option>
          <option>Arabe</option>
        </select>
      </label>
    </p>
    <button type="submit">Enregistrer</button>
    <pre>{{ f }}</pre>
  </form>
</div>

const { createApp, reactive } = Vue;

createApp({
  setup() {
    const rayons = ["Informatique", "Mathématiques", "Littérature"];
    // Un objet réactif pour l'ensemble du formulaire.
    const f = reactive({
      avis: "",
      lettre: false,
      rayons: [],
      retrait: "boutique",
      format: "",
      langues: [],
    });
    return { rayons, f };
  },
}).mount("#app");

Au chargement, puis après avoir tapé un avis, coché « Recevoir la lettre », coché « Littérature » puis « Informatique », choisi la livraison sur le campus, le format « Poche », puis « Français » et « Arabe » dans la liste multiple :

{
  "avis": "",
  "lettre": false,
  "rayons": [],
  "retrait": "boutique",
  "format": "",
  "langues": []
}
--- après la saisie
{
  "avis": "Très clair",
  "lettre": true,
  "rayons": [
    "Littérature",
    "Informatique"
  ],
  "retrait": "campus",
  "format": "poche",
  "langues": [
    "Français",
    "Arabe"
  ]
}