Convertir un composant


<script setup>
defineProps({
  livre: { type: Object, required: true },
});

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

function euros(montant) {
  return montant.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
}
</script>

<template>
  <article class="carte">
    <h2>{{ livre.titre }}</h2>
    <p class="prix">
      {{ euros(livre.prix) }}
    </p>
    <button
      type="button"
      :disabled="livre.stock === 0"
      @click="emit('ajouter', livre)"
    >
      {{ livre.stock === 0 ? "Épuisé" : "Ajouter au panier" }}
    </button>
  </article>
</template>

<style scoped>
.carte {
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #e2d8c9;
  border-radius: 8px;
}

.prix {
  color: #a8520a;
  font-weight: 700;
}
</style>


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

const livres = [
  { isbn: "9782956300014", titre: "Programmation Java", prix: 32, stock: 12 },
  { isbn: "9782956300045", titre: "Physique générale", prix: 59, stock: 0 },
];
const panier = ref([]);
</script>

<template>
  <CarteLivre
    v-for="livre in livres"
    :key="livre.isbn"
    :livre="livre"
    @ajouter="panier.push($event.titre)"
  />
  <p>Panier : {{ panier.join(", ") || "vide" }}</p>
</template>

Après un clic sur « Ajouter au panier » :


Programmation Java
32,00 €
Ajouter au panier
Physique générale
59,00 €
Épuisé
Panier : Programmation Java

Par rapport à la version CDN, le gabarit quitte la page HTML, la fonction euros est déclarée dans le script et directement utilisable, et l'objet d'options disparaît au profit des macros. Le style scoped ne touche que les éléments de la carte : un autre élément de classe prix ailleurs dans la page ne serait pas coloré.

Énoncé

Corrigé