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

Confirmer avant de vider

Communication entre composants · niveau 2

Énoncé

Avec le composant FenetreModale de la Librairie, ajouter un bouton « Vider le panier » qui ouvre une fenêtre « Vider le panier ? » avec un bouton « Oui, vider » dans l'emplacement actions. Où est le focus à l'ouverture ?

Corrigé


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

const lignes = ref(["Programmation Java", "Le Petit Prince"]);
const confirmer = ref(false);

function vider() {
  lignes.value = [];
  confirmer.value = false;
}
</script>

<template>
  <p>Panier : {{ lignes.join(", ") || "vide" }}</p>
  <button
    type="button"
    :disabled="lignes.length === 0"
    @click="confirmer = true"
  >
    Vider le panier
  </button>
  <FenetreModale v-model:ouverte="confirmer">
    <template #titre>
      Vider le panier ?
    </template>
    <p>Les {{ lignes.length }} livres du panier seront retirés.</p>
    <template #actions>
      <button
        type="button"
        class="bouton"
        @click="vider"
      >
        Oui, vider
      </button>
    </template>
  </FenetreModale>
</template>

À l'ouverture, showModal() place le focus sur le premier élément focalisable de la fenêtre : le bouton « Oui, vider ». Après un clic sur ce bouton :


Panier : vide | dialogue ouvert : false | bouton désactivé : true

(La capture est faite sans le focus, pour ne pas montrer son contour.) Pour une action destructrice, on préférerait que le focus soit sur « Fermer » : l'attribut autofocus sur ce bouton suffit, car showModal() le respecte.