-1

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"
    },
2
  • O problema varia muito do retorno da API, tem como mostrar um exemplo básico pelo menos das chaves que vêm no objeto? Mas o que eu sugiro é resolver isto no back-end, fazendo um novo endpoint ou o ideal seria um filtro, onde você passaria algo na queryString e ele retorna apenas os usuários do sexo desejado. Se não for possível posta um resultado exemplo da API que tento ajudar Commented 21/11/2019 às 21:51
  • Oi, adicionei na pergunta o retorno na API. Eu pensei em criar um outro endpoint porém na mesma pagina eu tenho uma barra de pesquisa onde também pode ser buscado o usuário pelo nome. Eu tenho o endpoint que me retorna todos os usuários cadastrados e no vue eu faço o filtro para retorno apenas do usuário com o nome buscado na barra de pesquisa. Sendo que além disso eu preciso implementar esses Selects para conseguir filtrar os usuários conforme alguns atributos como o sexo, por exemplo, e isso não to conseguindo fazer. Commented 22/11/2019 às 13:03

1 Resposta 1

1

Desculpe à demora para responder. No caso o problema que eu imagino que esteja acontecendo, é que você está filtrando o array apenas com uma variável users pelo sexo.

Porém, na segunda vez você perdeu todo o conteúdo inicial deste array que voltou na resposta. Ou seja, você supondo que você recebeu 4 usuários da resposta, 2 masculinos e 2 femininos. Se você selecionar em seu select o sexo feminino, você irá filtrar e perder os 2 masculinos automaticamente da resposta. Como você não irá fazer outra resposta no @change do seu select, você não tem como recuperar e mostrar os outros.

Segue um exemplo simples abaixo mostrando como usar duas variáveis. Também alterei o método. Em seu caso, creio que basta remover os objetos estáticos e descomentar a chamada da API.

export default {
  name: 'App',
  data: () => ({
    users:[
      {
          id: 1,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'FEM'
      },
      {
          id: 2,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'FEM'
      },
      {
          id: 3,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'MAS'
      },
      {
          id: 4,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'MAS'
      },
    ],
    usersInitial: [
      {
          id: 1,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'FEM'
      },
      {
          id: 2,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'FEM'
      },
      {
          id: 3,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'MAS'
      },
      {
          id: 4,
          username: 'teste',
          name: 'teste',
          social_name: 'teste',
          email: '[email protected]',
          profile: 'Teste',
          password: '***',
          birthdate: '09/12/1955',
          sexoChoice: 'MAS'
      }
    ],
    genero:'',
    generoChoice:['Feminino', 'Masculino'],
  }),
  mounted() {
    // axios.get('users/')
    //   .then(response => {
    //     this.users = response.data;
    //     this.usersInitial = response.data;
    //   })
    //   .catch(error => console.log(error))
  },
  methods: {
    getfilteredGenero() {
      const generoAbbr = this.genero.substring(0, 3).toUpperCase()
      const users = [ ...this.usersInitial ]
      this.users = users.filter(user => user.sexoChoice.toUpperCase() === generoAbbr)
    },
  },
};
<template>
  <v-app>
    <v-row>
      <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>
        <ul>
          <li v-for="(user, idx) in users" :key="idx">
            {{ user.name }} - {{ user.sexoChoice }}
          </li>
        </ul>
      </v-col>
    </v-row>
  </v-app>
</template>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .