Une ligne de panier — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Une ligne de panier

Composants · niveau 1 (application)

Énoncé

Écrire un composant LignePanier qui reçoit un titre, un prix et une quantité (1 par défaut) et affiche « 3 × L'Étranger à 7,90 € = 23,70 € ». Le sous-total est-il une prop, une donnée locale ou une valeur calculée ? Pourquoi faut-il l'arrondir ?

Corrigé


const LignePanier = {
  template: "#modele-ligne-panier",
  props: {
    titre: { type: String, required: true },
    prix: { type: Number, required: true },
    quantite: { type: Number, default: 1 },
  },
  setup(props) {
    // Arrondi au centime : 3 × 7,9 vaut 23,700000000000003 en flottant
    const sousTotal = computed(() => Math.round(props.prix * props.quantite * 100) / 100);
    return { sousTotal, euros };
  },
};


2 × Le Petit Prince à 8,50 € = 17,00 €
3 × L’Étranger à 7,90 € = 23,70 €

Le sous-total n'est pas une prop (le parent n'a pas à le calculer), ni une donnée locale (il deviendrait faux dès que la quantité change) : c'est une valeur calculée à partir des props. En flottants, $3 \times 7, 9$ vaut $23, 700000000000003$ ; l'affichage en euros l'arrondirait, mais un total calculé à partir de sous-totaux non arrondis peut finir décalé d'un centime : on arrondit au centime dès le calcul.