Filter data using v-select in Vue

Question

I have an API that returns me all registered users on the system, I need to implement a form of search where I can filter these users by sex. I have a field (v-select) where we can choose male or female, but the method of filtering is not working properly.

Ex:in case I do not choose anything should see all registered employees, if choose female, only female people should appear, if male vice versa.

only that at the moment the function filters the data only once , if I remove the filter all users get lost and no data appears.

PS: I am using Vue and vuetify and have no previous experience with js or front frameworks.

The code I have is:

    <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>

In the call the API returns me the following keys:

{
        "id": *,
        "username": "****",
        "name": "****",
        "social_name": **,
        "email": "*******",
        "profile": *,
        "password": "*******",
        "birthdate": **,
        "sexoChoice": "FEM"
    },

Answer 1

Sorry for the delay in responding. In case the problem I imagine is happening, is that you are filtering the array with only one variable users for sex.

However, the second time you lost all the initial contents of this array that came back in response. That is, you assume that you received 4 answer users, 2 male and 2 female. If you select in your select the female gender, you will filter and lose the male 2 of the answer automatically. How will you not make another answer on @change from your select, you have no way to recover and show the others.

Here is a simple example below showing how to use two variables. I also changed the method. In your case, I believe it is enough to remove the static objects and uncomment the API call.

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>