Un gabarit écrit dans la page — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Un gabarit écrit dans la page

Composants · niveau 2

Énoncé

Le composant CarteLivre déclare les props titre et prixUnitaire. On l'utilise ainsi dans la page (code/ch5/erreurs/gabarit-dom/) :


<div id="app">
  <CarteLivre :prixUnitaire="32" titre="Programmation Java"/>
  <p>Fin du catalogue.</p>
</div>

Qu'affiche la page ? Que dit la console ? Corriger.

Corrigé

La page n'affiche que « Fin du catalogue. », et la console dit :


[Vue warn]: Failed to resolve component: cartelivre
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <App>

Le navigateur a lu la page avant Vue, avec les règles de HTML. Il a mis le nom de la balise et ses attributs en minuscules : <cartelivre prixunitaire="32">, que Vue ne relie à aucun composant (« Failed to resolve component »). Il a ignoré la barre de /> : la balise reste ouverte, et le paragraphe qui suit est devenu son contenu. Le DOM réel est


<cartelivre prixunitaire="32" titre="Programmation Java"><p>Fin du catalogue.</p></cartelivre>

La correction :


<div id="app">
  <carte-livre :prix-unitaire="32" titre="Programmation Java"></carte-livre>
  <p>Fin du catalogue.</p>
</div>

qui affiche


Programmation Java
32 €
Fin du catalogue.