Erreur à la sortie du champ — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 4)

Erreur à la sortie du champ

Formulaires · niveau 1 (application)

Énoncé

Un champ « Nom » obligatoire n'affiche « Indiquez votre nom. » qu'après que le visiteur l'a quitté vide, et le message disparaît dès qu'il tape une lettre. Écrire l'application avec une ref quitte et une propriété calculée.

Corrigé


<div id="app">
  <div>
    <p>
      <label for="nom">Nom</label>
      <input type="text" id="nom" v-model.trim="nom" :aria-invalid="afficher ? 'true' : null"
             aria-describedby="erreur-nom" @blur="quitte = true">
      <span id="erreur-nom">{{ afficher ? "Indiquez votre nom." : "" }}</span>
    </p>
  </div>
</div>


const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const nom = ref("");
    const quitte = ref(false);
    const afficher = computed(() => quitte.value && nom.value === "");
    return { nom, quitte, afficher };
  },
}).mount("#app");

Le message au chargement (vide), après avoir quitté le champ vide, puis après avoir tapé « Awa » :



Indiquez votre nom.
""