Les étapes d'une commande


<script setup>
import { ref } from "vue";
import EtapeConfirmation from "./EtapeConfirmation.vue";
import EtapeCoordonnees from "./EtapeCoordonnees.vue";
import EtapePanier from "./EtapePanier.vue";

const ETAPES = [
  { titre: "Panier", composant: EtapePanier },
  { titre: "Coordonnées", composant: EtapeCoordonnees },
  { titre: "Confirmation", composant: EtapeConfirmation },
];
const numero = ref(0);
const nom = ref("");
</script>

<template>
  <h2>Étape {{ numero + 1 }} sur 3 : {{ ETAPES[numero].titre }}</h2>
  <!-- Toutes les étapes ont la même interface : prop nom, événements
       update:nom, suivant, precedent -->
  <component
    :is="ETAPES[numero].composant"
    v-model:nom="nom"
    @suivant="numero++"
    @precedent="numero--"
  />
</template>


<script setup>
const nom = defineModel("nom", { type: String, default: "" });
const emit = defineEmits(["suivant", "precedent"]);
</script>


<script setup>
// Même interface que les autres étapes, même si celle-ci n'utilise pas « nom »
defineProps({ nom: { type: String, default: "" } });
const emit = defineEmits(["update:nom", "suivant", "precedent"]);
</script>

On continue, on tape « Diallo » (avec des espaces), on continue, puis on revient en arrière :


Étape 1 sur 3 : Panier
Étape 2 sur 3 : Coordonnées
Continuer désactivé : true
Étape 3 sur 3 : Confirmation
Commande au nom de Diallo : à confirmer.
Retour
champ après retour : « Diallo »

Le nom n'est pas perdu : il appartient au parent, qui le redonne à l'étape recréée. Les étapes qui n'utilisent pas nom le déclarent quand même, pour que <component :is> puisse leur transmettre les mêmes attributs sans que Vue les ajoute à leur élément racine.

Énoncé

Corrigé