Une alerte réutilisable — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Une alerte réutilisable

Composants · niveau 1 (application)

Énoncé

Écrire un composant AlerteMessage dont la prop type vaut "info" (par défaut) ou "erreur", et dont le message est fourni par un emplacement. Une alerte d'erreur doit être annoncée immédiatement par un lecteur d'écran, une information à la première pause. Que se passe-t-il avec type="succes" ?

Corrigé


const { createApp } = Vue;

const AlerteMessage = {
  template: "#modele-alerte-message",
  props: {
    type: {
      type: String,
      default: "info",
      validator: (t) => ["info", "erreur"].includes(t),
    },
  },
};

createApp({ components: { AlerteMessage } }).mount("#app");


<template id="modele-alerte-message">
  <div :class="['alerte', type]" :role="type === 'erreur' ? 'alert' : 'status'">
    <strong>{{ type === "erreur" ? "Erreur" : "Information" }} :</strong>
    <slot>(message vide)</slot>
  </div>
</template>

Le rôle alert fait annoncer le message immédiatement, le rôle status à la première pause du lecteur d'écran. Avec type="succes", la console affiche


[Vue warn]: Invalid prop: custom validator check failed for prop "type".
  at <AlerteMessage type="succes" >
  at <App>

et l'alerte s'affiche quand même, comme une information : le validateur prévient, il n'empêche rien.