La fiche d'un livre


<script setup>
import { ref } from "vue";
import { useFetch } from "../composables/useFetch.js";

const isbn = ref("9782956300014");
const { donnees: livre, erreur, chargement } = useFetch(() => `/api/livres/${isbn.value}`);
</script>


<p>
  <label for="isbn">Livre</label>
  <select
    id="isbn"
    v-model="isbn"
  >
    <option value="9782956300014">
      Programmation Java
    </option>
    <option value="9782956300052">
      Le Petit Prince
    </option>
    <option value="9780000000000">
      (ISBN inconnu)
    </option>
  </select>
</p>
<p
  v-if="chargement"
  aria-live="polite"
>
  Chargement…
</p>
<p
  v-else-if="erreur"
  role="alert"
>
  Fiche indisponible. {{ erreur }}
</p>
<article v-else-if="livre">
  <h2>{{ livre.titre }}</h2>
  <p>{{ livre.auteur }} — {{ livre.prix }} € — {{ livre.stock }} en stock</p>
</article>

Pour « Programmation Java », « Le Petit Prince », puis l'ISBN inconnu, la fiche affiche successivement :


Programmation Java / I. Alame — 32 € — 12 en stock
Le Petit Prince / A. de Saint-Exupéry — 8.5 € — 25 en stock
Fiche indisponible. Le serveur a répondu 404.

(la console du navigateur signale aussi la réponse 404). L'adresse est une fonction : useFetch la réévalue quand isbn change. Écrire useFetch("/api/livres/" + isbn.value) figerait l'adresse du premier livre. Le prix s'affiche « 8.5 € » : il faudrait la fonction prixEnEuros de la Librairie.

Énoncé

Corrigé