Nouveautés notées — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 2)

Nouveautés notées

Gabarits et directives · niveau 2

Énoncé

Afficher la liste numérotée 1. Programmation Java ★★★★☆ à partir d'un tableau d'objets { titre, note } (note de 0 à 5), avec deux v-for imbriqués. Les étoiles sont décoratives pour un lecteur d'écran : que lui faire lire à la place ?

Corrigé


<ol id="app">
  <li v-for="(livre, i) in nouveautes" :key="livre.titre">
    {{ i + 1 }}. {{ livre.titre }}
    <span :aria-label="'Note : ' + livre.note + ' sur 5'"><span v-for="n in 5" :key="n" aria-hidden="true">{{ livre.note >= n ? "★" : "☆" }}</span></span>
  </li>
</ol>


const { createApp } = Vue;

createApp({
  setup() {
    const nouveautes = [
      { titre: "Programmation Java", note: 4 },
      { titre: "Introduction à l’algorithmique", note: 5 },
      { titre: "Analyse MPSI", note: 3 },
    ];
    return { nouveautes };
  },
}).mount("#app");


1. Programmation Java ★★★★☆
2. Introduction à l’algorithmique ★★★★★
3. Analyse MPSI ★★★☆☆

v-for="n in 5" compte de 1 à 5 : l'étoile numéro n est pleine si n ne dépasse pas la note. Les étoiles portent aria-hidden="true", et leur conteneur un aria-label : un lecteur d'écran lit « Note : 4 sur 5 » au lieu de cinq symboles. La comparaison est écrite livre.note >= n plutôt que n <= livre.note : dans un gabarit écrit dans la page, un « < » peut ouvrir une balise (exercice 2.10), et le validateur HTML le refuse.