creare un filtraggio tramite checkbox di categorie, con una chiamata axios - database

Question

I'm new to the community. I'm trying to filter a list of restaurants deriving from a DB. The client side filter works, but now I would like to move the server side filter and that at every check of the checkboxes, it sends an axios call to take from the DB only the restaurants that contain the selected categories.
'''<script>
import axios from 'axios';
import Layout from '../layouts/Layout.vue';
import RestaurantCard from '../components/RestaurantCard.vue'
export default {
components: {
Layout,
RestaurantCard
},
data(){
return{
users: [],
categories: [],
filteredUsers: [],
userCategories: [],
categoryFiltered: [],
loading: false
}
},
methods:{
fetchRestaurant() {
axios.get("/api/users")
.then((res) => {
const { users } = res.data;
this.users = users;
})
.catch((err) => {
console.warn(err);
this.$router.push("/404");
});
},
fetchCategories(){
axios.get("/api/categories")
.then((res) => {
const { categories } = res.data;
this.categories = categories;
})
.catch((err) => {
console.warn(err);
this.$router.push("/404");
});
},
checkCategoriesContain(user){
let userCategories = user.categories.map((c)=>{
return c.name;
});
return this.categoryFiltered.every((el)=>{
return userCategories.includes(el);
});
}
},
computed: {
filteredRestaurants(){
if(!this.categoryFiltered.length){
return(this.filteredUsers = this.users);
} else {
this.filteredUsers = this.users.filter(
this.checkCategoriesContain
);
return this.filteredUsers;
}
}
},
mounted() {
this.fetchRestaurant()
this.fetchCategories()
},
}
</script>'''