Un interrupteur — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 7)

Un interrupteur

Communication entre composants · niveau 1 (application)

Énoncé

Écrire un composant InterrupteurOption, utilisable avec v-model sur un booléen, qui affiche un bouton de rôle switch : son texte vient d'un emplacement, suivi de « ● oui » ou « ○ non ». Le parent affiche « Emballage : oui (+ 2 €) » ou « Emballage : non ».

Corrigé


<script setup>
const actif = defineModel({ type: Boolean, default: false });
</script>

<template>
  <button
    type="button"
    role="switch"
    :aria-checked="actif"
    class="interrupteur"
    @click="actif = !actif"
  >
    <slot />
    <span aria-hidden="true">{{ actif ? " ● oui" : " ○ non" }}</span>
  </button>
</template>

Avant et après un clic (valeur de aria-checked, puis texte de la page) :


avant : false | Emballage cadeau ○ non
Emballage : non
après un clic : true | Emballage cadeau ● oui
Emballage : oui (+ 2 €)

Le rôle switch et aria-checked disent aux lecteurs d'écran qu'il s'agit d'un interrupteur et dans quel état il est ; les ronds sont décoratifs (aria-hidden).