Corriger le composant fautif

<script setup>
import { computed } from "vue";

const props = defineProps({
  livres: { type: Array, required: true },
});
// Le filtre appartient au parent : v-model:filtre le lui renvoie.
const filtre = defineModel("filtre", { type: String, default: "" });

// Filtrer dans un computed, plutôt que mêler v-if et v-for.
const disponibles = computed(() => props.livres.filter((livre) => livre.stock > 0));

function effacer() {
  filtre.value = "";
}
</script>

<template>
  <ul>
    <li
      v-for="livre in disponibles"
      :key="livre.isbn"
    >
      {{ livre.titre }}
    </li>
  </ul>
  <button
    type="button"
    @click="effacer"
  >
    Effacer
  </button>
</template>

$ npx eslint src/ListeCorrigee.vue
(aucun message : le fichier est conforme)

• La prop n'est plus modifiée : le filtre devient un defineModel, et effacer demande au parent de changer sa valeur (événement update:filtre).
• Le filtrage passe dans un computed, et chaque élément de la liste a sa clé.

Le test vérifie que l'utilisateur voit la même chose qu'avant :

// Exercice 11.8 : la liste corrigée se comporte comme prévu.
import { test, expect } from "vitest";
import { mount } from "@vue/test-utils";
import ListeCorrigee from "../src/ListeCorrigee.vue";

test("livres disponibles seulement, et Effacer émet un filtre vide", async () => {
  const livres = [
    { isbn: "1", titre: "Programmation Java", stock: 12 },
    { isbn: "2", titre: "Physique générale", stock: 0 },
  ];
  const liste = mount(ListeCorrigee, { props: { livres, filtre: "phy" } });
  expect(liste.findAll("li").map((li) => li.text())).toEqual(["Programmation Java"]);
  await liste.find("button").trigger("click");
  expect(liste.emitted("update:filtre")).toEqual([[""]]);
});

 ✓ tests/ex8-liste.test.js (1 test)
   ✓ livres disponibles seulement, et Effacer émet un filtre vide