Un filtre de prix

<script setup>
const min = defineModel("min", { type: Number, default: 0 });
const max = defineModel("max", { type: Number, default: 100 });
</script>

<template>
  <fieldset>
    <legend>Prix</legend>
    <label>de <input
      v-model.number="min"
      type="number"
      min="0"
    > €</label>
    <label> à <input
      v-model.number="max"
      type="number"
      min="0"
    > €</label>
  </fieldset>
</template>

<script setup>
import { computed, ref } from "vue";
import FiltrePrix from "./FiltrePrix.vue";

const LIVRES = [
  { titre: "Programmation Java", prix: 32 },
  { titre: "Introduction à l’algorithmique", prix: 89 },
  { titre: "Le Petit Prince", prix: 8.5 },
  { titre: "L’Étranger", prix: 7.9 },
];
const prixMin = ref(0);
const prixMax = ref(50);
const affiches = computed(() => LIVRES.filter((l) => l.prix >= prixMin.value && l.prix <= prixMax.value));
</script>

Au départ (de 0 à 50), puis avec les bornes 5 et 8 :

De 0 à 50 :
Programmation Java (32 €)
Le Petit Prince (8.5 €)
L’Étranger (7.9 €)
De 5 à 8 :
L’Étranger (7.9 €)

Un champ type="number" rend toujours une chaîne : input.value vaut "5". Sans .number, le parent recevrait "5", et la comparaison l.prix >= "5" marcherait par conversion, mais "10" < "8" est vrai entre chaînes. Le modificateur convertit la saisie en nombre, et les props gardent leur type Number.