Eu tenho uma API que me retorna todos os usuários cadastrados no sistema, eu preciso implementar uma forma de busca onde eu consiga filtrar esses usuários por sexo. Eu tenho um campo (v-select) onde podemos escolher o sexo masculino ou feminino, porém o método de filtrar não esta funcionando corretamente.
Ex:no caso se eu não escolher nada deveria ver todos os funcionarios cadastrados, se escolher feminino, só as pessoas de sexo feminino deveriam aparecer, se masculino vice versa.
só que no momento a função filtra os dados apenas uma vez , se eu retirar o filtro todos os usuários se perdem e não aparece nenhum dado.
PS: estou usando vue e vuetify e não tenho nenhuma experiência anterior com js nem frameworks de front.
O código que eu tenho é:
<template>
<v-col class="d-flex" cols="12" sm="6">
<v-select v-model="genero" @change="getfilteredGenero" :items="generoChoice" label="Sexo" :clearable="true" solo></v-select>
</v-col>
</template>
<script>
export default {
data() {
return {
users:[],
genero:'',
generoChoice:['Feminino', 'Masculino'],
},
mounted() {
axios.get('users/')
.then(response => {
this.users = response.data;
})
.catch(error => console.log(error))
},
methods: {
getfilteredGenero(){
let usersAux = this.users;
let genero = this.genero;
this.users = usersAux.filter(function(obj){
if(genero == 'Feminino'){
return obj.sexoChoice == 'FEM'
}else if(genero == 'Masculino'){
return obj.sexoChoice == 'MAS'
}
});
},
},
}
</script>
Na chamada a API me retorna as seguintes chaves:
{
"id": *,
"username": "****",
"name": "****",
"social_name": **,
"email": "*******",
"profile": *,
"password": "*******",
"birthdate": **,
"sexoChoice": "FEM"
},