Noter un livre

const { createApp, ref } = Vue;

const NoteEtoiles = {
  template: "#modele-note-etoiles",
  props: {
    note: { type: Number, default: 0, validator: (n) => Number.isInteger(n) && n >= 0 && n <= 5 },
  },
  emits: ["noter"],
  setup(props, { emit }) {
    // Étoile pleine jusqu'à la note, vide au-delà
    const etoile = (n) => (n <= props.note ? "★" : "☆");
    return { emit, etoile };
  },
};

createApp({
  components: { NoteEtoiles },
  setup() {
    return { note: ref(0) };
  },
}).mount("#app");

<div id="app">
  <p>Votre note pour « Le Petit Prince » :</p>
  <note-etoiles :note="note" @noter="note = $event"></note-etoiles>
  <p role="status">{{ note === 0 ? "Pas encore noté." : `Votre note : ${note}/5` }}</p>
</div>

<template id="modele-note-etoiles">
  <p class="etoiles">
    <button v-for="n in 5" :key="n" type="button"
            :aria-label="`Noter ${n} sur 5`" :aria-pressed="n === note"
            @click="emit('noter', n)">{{ etoile(n) }}</button>
  </p>
</template>

Après un clic sur le quatrième bouton :

Votre note pour « Le Petit Prince » :
★★★★☆
Votre note : 4/5

v-for="n in 5" parcourt les entiers de 1 à 5. Les étoiles ne sont pas lisibles par un lecteur d'écran, d'où aria-label ; aria-pressed vaut true pour le seul bouton de la note actuelle (le quatrième ici). Le composant ne modifie pas note : il émet noter, et le parent affecte la valeur reçue (la variable spéciale du gestionnaire en ligne). La petite fonction etoile évite d'écrire une comparaison <= dans le gabarit de la page, que le validateur HTML signale comme un caractère brut.