Quantité bornée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 1)

Quantité bornée

Premiers pas avec Vue · niveau 1 (application)

Énoncé

Afficher « Quantité : 0 » et deux boutons « −1 » et « +1 ». La quantité ne peut pas descendre sous 0 ni dépasser 5 : le bouton correspondant est alors désactivé (attribut lié :disabled, comme dans le panier du cours).

Corrigé


<div id="app">
  <p>Quantité : {{ quantite }}</p>
  <button type="button" :disabled="quantite === 0" @click="quantite--">−1</button>
  <button type="button" :disabled="quantite === MAX" @click="quantite++">+1</button>
</div>


const { createApp, ref } = Vue;

const MAX = 5;

createApp({
  setup() {
    const quantite = ref(0);
    return { quantite, MAX };
  },
}).mount("#app");

Au chargement, l'état disabled des deux boutons (« −1 » puis « +1 »), puis, après six clics sur « +1 », le paragraphe et l'état des boutons :


true false
Quantité : 5
false true

Le sixième clic ne fait rien : le bouton est désactivé dès que la quantité atteint 5. La constante MAX est renvoyée par setup pour être visible dans le gabarit ; elle ne change pas, une ref serait inutile.