Adloun

Vue : construire une application web (école d'ingénieur) · Chapitre 5 · Application directe du cours

Prédire les avertissements

Composants · niveau 2

Énoncé

Le composant FicheAvis est déclaré ainsi :


const FicheAvis = {
  template: "#modele-fiche-avis",
  props: {
    titre: { type: String, required: true },
    note: { type: Number, default: 0, validator: (n) => n >= 0 && n <= 5 },
  },
};

Quels avertissements la page suivante produit-elle, et qu'affiche-t-elle ?


<div id="app">
  <fiche-avis titre="Programmation Java" note="4"></fiche-avis>
  <fiche-avis :note="6"></fiche-avis>
  <fiche-avis titre="Le Petit Prince" :note="4"></fiche-avis>
</div>

Corrigé


[Vue warn]: Invalid prop: type check failed for prop "note". Expected Number with value 4, got String with value "4".
  at <FicheAvis titre="Programmation Java" note="4" >
  at <App>
[Vue warn]: Missing required prop: "titre"
  at <FicheAvis note=6 >
  at <App>
[Vue warn]: Invalid prop: custom validator check failed for prop "note".
  at <FicheAvis note=6 >
  at <App>

La page affiche :


Programmation Java : 4/5
: 6/5
Le Petit Prince : 4/5
  • note="4", sans deux-points, transmet la chaîne "4" : avertissement de type. L'affichage est pourtant correct, puisque l'interpolation transforme tout en texte.
  • La deuxième fiche n'a pas de titre (avertissement « Missing required prop ») et sa note, 6, est refusée par le validateur : deux avertissements pour la même balise. Elle s'affiche quand même, « : 6/5 ».
  • La troisième fiche est correcte.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →