Filter in more than one column

Question

Good afternoon guys, I made a table that has its data iterated through v-for, it occurs that I need to filter this table by column I found the function filter however I can only filter one want to be able to filter the result of this filter using the criteria of the other columns.

I thought about putting && in the first table filter but it only shows result if fill all fields or || but it will show me qq thing I type in input

Follow the code I’m using to filter

I have this table here :

follows code :

<script>

export default {
  data() {
    return {
      CodigoPapel: "",
      CodigoTipoNegociacao: "",
      listas: [
        {
          CodigoPapel: 90,
          NomeEmpresa: "IRBR1",
          CodigoTipoNegociacao: 77,
        },
        {
          CodigoPapel: 90,
          NomeEmpresa: "ARGX4",
          CodigoTipoNegociacao: 3,
        },
        {
          CodigoPapel: 12,
          NomeEmpresa: "Petrobras",
          CodigoTipoNegociacao: 3,
        },
      ],
    };
  },
  computed: {
    
    listaFiltrada: function () {
      
     return this.listas.filter((item)=> {
       return item.CodigoPapel == this.CodigoPapel
     })
    },
  },

  
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

You only need to include the conditions within the filter, returning true if the element should appear, or false if it should be filtered:

const lista = [{"CodigoPapel":90,"NomeEmpresa":"IRBR1","CodigoTipoNegociacao":77},{"CodigoPapel":90,"NomeEmpresa":"ARGX4","CodigoTipoNegociacao":3},{"CodigoPapel":12,"NomeEmpresa":"Petrobras","CodigoTipoNegociacao":3}]

this.CodigoTipoNegociacao = '3'
this.CodigoPapel = ''

const resultado = lista.filter(item => {
    let aparece = true
    if (this.CodigoPapel) aparece &= this.CodigoPapel == item.CodigoPapel
    if (this.CodigoTipoNegociacao) aparece &= this.CodigoTipoNegociacao == item.CodigoTipoNegociacao

    return aparece
})

console.log(resultado)

In the example I start the condition to appear in the list as true. Case CodigoPapel or CodigoTipoNegociacao is not a value falsy (as an empty string), the comparison will be made, and the result is assigned to aparece.

Using the operator &= you can perform the logical comparison and during the assignment, thus even if the result of the comparison is true, if aparece for false, it will remain false because false && true is false.

The same could also be obtained by using the ternary operator more directly:

const lista = [{"CodigoPapel":90,"NomeEmpresa":"IRBR1","CodigoTipoNegociacao":77},{"CodigoPapel":90,"NomeEmpresa":"ARGX4","CodigoTipoNegociacao":3},{"CodigoPapel":12,"NomeEmpresa":"Petrobras","CodigoTipoNegociacao":3}]

this.CodigoTipoNegociacao = '3'
this.CodigoPapel = ''

const resultado = lista.filter(item => 
    (this.CodigoPapel ? this.CodigoPapel == item.CodigoPapel : true) &&
    (this.CodigoTipoNegociacao ? this.CodigoTipoNegociacao == item.CodigoTipoNegociacao: true)
)

console.log(resultado)

In this comparison, if CodigoTipoNegociacao or CodigoTipoNegociacao are empty, you simply result in the comparison being true, because an empty string means that the item should appear.