Bonjour, je travaille sur une application avec comme backend laravel et front Nuxt js, j'aimerai faire un multi filtres, grace a un request a la base de données j'ai des données des prestataires avec les differentes relations (categories, profile ...). j'aimerai pouvoir filter par category , par prestataires verified,par ville, par prix le plus bas et prices le plus eleves si possible fusionné les differents filtres au besoins.
voici mon code:
<template>
<div class="container mx-auto">
<div class="max-w-5xl mx-auto">
<header class="flex justify-between my-8 p-3 sectionFilter">
<div class="flex items-center space-x-2">
<MjSelect v-model="selectedCategory" placeholder="Categories">
<option value="All">Filtre par: categorie</option>
<option v-for="prestataire in prestataires" :key="prestataire.id"
:value=prestataire.category.id>{{ prestataire.category.name}}</option>
</MjSelect>
<MjSelect v-model="selectedCity" placeholder="Villes">
<option value="All">Filtre par: Ville</option>
<option v-for="prestataire in prestataires" :key="prestataire.id"
:value=prestataire.profile.id>{{ prestataire.profile.ville}}</option>
</MjSelect>
</div>
<div class="flex items-center space-x-2">
<div>
<MjSelect v-model="selectedPrice" placeholder="Prix">
<option value="All">Filtre par: prix</option>
<option value="1">Plus bas</option>
<option value="2">Plus elevé</option>
</MjSelect>
</div>
<MjToggle v-model="verified">
Verified
<MjIcon class="text-green-800" name="award"/>
</MjToggle>
</div>
</header>
<div class="app-wrapper flex flex-wrap -mx-4">
<CardPrestataire v-for="prestataire in filteredPrestataires" :key="prestataire.id"
:link="`/prestataires/${prestataire.slug}`"
:title=prestataire.name
:price=prestataire.price
:imageUrl=prestataire.photos
:category=prestataire.category.name
:description=prestataire.description.substring(0,90)
:ville=prestataire.profile.ville
:verified=prestataire.verified
:href="`/categories/${prestataire.category.slug}`"
:id="prestataire.id" :value="prestataire.id" v-model="liked"/>
</div>
</div>
</div>
</template>
<script>
import CardPrestataire from "../../components/elements/CardPrestataire";
import ALink from "../../components/forms/ALink";
export default {
name: "index",
components: { ALink, CardPrestataire },
data:() => ({
loading: false,
prestataires: [],
category_id: '',
selectedCity: 'All',
selectedPrice: 'All',
errors: [],
liked: [],
selectedCategory: 'All',
type: '',
verified: false,
}),
mounted() {
this.getPrestataires();
this.getPrestataireByQueryCategory()
},
computed: {
filteredPrestataires: function (){
if(this.selectedCategory == 'All'){
return this.prestataires
}
else if(this.selectedCategory !== 'All'){
return this.prestataires.filter((prestataire) => {
return prestataire.category_id == this.selectedCategory
})
}
else if(this.selectedCity !== 'All'){
return this.prestataires.filter((prestataire) => {
return prestataire.profile_id == this.selectedCity
})
}
else if(this.verified){
return this.prestataires.filter((prestataire) => {
return prestataire.verified == 1
})
}
},
},
methods: {
async getCategories() {
try {
await this.$axios.get('/api/categories')
.then((resp) => {
this.categories = resp.data.data
})
}catch (err) {console.log(err)}
},
async getPrestataires(){ // request a la base de données
this.loading = true;
try {
await this.$axios.get('/api/prestataires')
.then((resp) => {
this.prestataires = resp.data.data
})
return this.prestataires
}catch (error){
this.loading = false;
console.log(error)
}
},
sortByLowPrice: function() {
if(this.selectedPrice === 1){
return this.prestataires.sort(function(a,b) {
return a.price - b.price ;
})
}
},
sortByHigherPrice: function() {
return this.prestataires.sort(function(a,b) {
return b.price - a.price ;
})
},
}
}
</script>
<style scoped>
</style>
Ce que j'obtiens
j'ai que le filtre par category qui fonctionne le reste non, j'aimerai vraimn votre aime , merci!