Une zone d'avis — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 6)

Une zone d'avis

Vite et composants monofichiers · niveau 2

Énoncé

Écrire un composant ZoneAvis : un champ de texte de max caractères au plus (prop, 140 par défaut), un compteur « 12 caractères restants » annoncé aux lecteurs d'écran, et un bouton « Publier », désactivé tant que le champ est vide, qui émet publier avec le texte sans espaces superflus et vide le champ. Le parent ajoute chaque avis publié à une liste.

Corrigé


<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  max: { type: Number, default: 140 },
});

const emit = defineEmits(["publier"]);

const texte = ref("");
const reste = computed(() => props.max - texte.value.length);

function publier() {
  emit("publier", texte.value.trim());
  texte.value = "";
}
</script>

<template>
  <p>
    <label for="avis">Votre avis</label><br>
    <textarea
      id="avis"
      v-model="texte"
      :maxlength="max"
      rows="3"
      aria-describedby="reste"
    />
  </p>
  <p
    id="reste"
    aria-live="polite"
  >
    {{ reste }} caractère{{ reste > 1 ? "s" : "" }} restant{{ reste > 1 ? "s" : "" }}
  </p>
  <button
    type="button"
    :disabled="texte.trim() === ''"
    @click="publier"
  >
    Publier
  </button>
</template>

Avec max à 20, on tape « Très clair, merci ! » (19 caractères) : le compteur indique « 1 caractère restant ».

L'attribut

maxlength empêche ensuite de dépasser 20 caractères. Après « Publier », le champ est vidé et l'avis s'affiche :


Votre avis
20 caractères restants
Publier
Très clair, merci !

Le texte du champ est un état local de la zone, le compteur une valeur calculée ; seul l'avis publié remonte au parent.