Valider un événement — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 6)

Valider un événement

Vite et composants monofichiers · niveau 2

Énoncé

defineEmits accepte, à la place d'un tableau, un objet qui associe à chaque événement une fonction de validation de ses arguments. Déclarer ainsi l'événement noter d'un composant de notation, qui doit recevoir un entier de 1 à 5. Que se passe-t-il si le composant émet noter avec la valeur 7 ?

Corrigé


<script setup>
defineProps({
  note: { type: Number, default: 0 },
});

// Validation de l'événement : la fonction reçoit les arguments de emit()
const emit = defineEmits({
  noter: (n) => Number.isInteger(n) && n >= 1 && n <= 5,
});
</script>

<template>
  <p>
    <button
      v-for="n in 5"
      :key="n"
      type="button"
      :aria-pressed="n === note"
      @click="emit('noter', n)"
    >
      {{ n }}
    </button>
    <button
      type="button"
      @click="emit('noter', 7)"
    >
      7 (interdit)
    </button>
  </p>
</template>


<script setup>
import { ref } from "vue";
import NoteEtoiles from "./NoteEtoiles.vue";

const note = ref(0);

function noter(n) {
  console.log("noter reçu :", n);
  note.value = n;
}
</script>

Après un clic sur « 4 », puis sur « 7 (interdit) » :


noter reçu : 4
[Vue warn]: Invalid event arguments: event validation failed for event "noter".
noter reçu : 7

La validation échoue, Vue avertit… et transmet quand même l'événement : le parent reçoit 7. Comme pour les props, la validation des événements est un outil de développement, qui n'existe pas dans la version de production. Si la valeur peut vraiment être fausse, le parent doit la vérifier.