Caractères restants — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 4)

Caractères restants

Formulaires · niveau 1 (application)

Énoncé

Refaire avec Vue l'exercice « Caractères restants » du livre JavaScript : sous une zone d'avis limitée à 140 caractères, afficher « 125 caractères restants », « 1 caractère restant », en rouge sous 10. Combien de lignes de JavaScript faut-il ?

Corrigé


<div id="app">
  <div>
    <p><label>Votre avis <textarea v-model="avis" :maxlength="MAX" rows="3" aria-describedby="reste"></textarea></label></p>
    <p id="reste" aria-live="polite" :style="{ color: reste < 10 ? '#b3261e' : null }">
      {{ reste }} caractère{{ reste > 1 ? "s" : "" }} restant{{ reste > 1 ? "s" : "" }}
    </p>
  </div>
</div>


const { createApp, ref, computed } = Vue;

const MAX = 140;

createApp({
  setup() {
    const avis = ref("");
    const reste = computed(() => MAX - avis.value.length);
    return { avis, reste, MAX };
  },
}).mount("#app");

Après 15, puis 139 caractères (avec la couleur calculée du message), puis deux de plus, dont maxlength n'accepte qu'un :


125 caractères restants
1 caractère restant
rgb(179, 38, 30)
0 caractère restant

Une propriété calculée de trois lignes ; le message se met à jour seul, là où la version du livre JavaScript écoutait input et réécrivait le texte et la classe.