Le signe inférieur — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 2)

Le signe inférieur

Gabarits et directives · niveau 3 (difficile)

Énoncé

Avec setup() { return { prix: 32, quantite: 2 }; }, qu'affiche cette page, écrite dans le <body> ? Que dit la console ? Proposer deux corrections.


<ol id="app">
  <li>{{ prix < 50 }}</li>
  <li>{{ quantite<prix }}</li>
  <li>Fin de la liste</li>
</ol>

Corrigé

La console signale une erreur de compilation, et le HTML produit est abîmé :


[Vue warn]: Template compilation error: Invalid end tag.
2  |      <li>{{ prix &lt; 50 }}</li>
3  |      <li>{{ quantite<prix }}<="" li="">
4  |      </prix></li><li>Fin de la liste</li>
   |      ^
5  |
  at <App>
<li>true</li><li>true&lt;="" li=""&gt; </li><li>Fin de la liste</li>

Le premier « < », suivi d'une espace, reste du texte. Mais dans {{ quantite<prix }}, le navigateur, qui lit la page avant Vue, voit l'ouverture d'une balise <prix> : il l'insère dans l'arbre, et Vue reçoit un gabarit déjà déformé. Deux corrections : écrire la comparaison dans l'autre sens ({{ prix > quantite }}), ou la déplacer dans une fonction de setup, qui n'est pas lue par l'analyseur HTML :


<ol id="app">
  <li>{{ prix < 50 }}</li>
  <li>{{ prix > quantite }}</li>
  <li>{{ moinsCher(quantite, prix) }}</li>
  <li>Fin de la liste</li>
</ol>


"true"
"true"
"true"
"Fin de la liste"

Le problème disparaît avec les composants monofichiers (chapitre 6), dont le gabarit n'est jamais lu par l'analyseur HTML du navigateur.