How to work with if in a Vue.js application

Question

I am new as Javascript programmer and I’m having a difficulty that maybe for some is no problem.

observe the HTML code well;

<tbody>
              <tr v-for="bancodedado in filteredBancodedaos  ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>

Now the Javascript code;

var app = new Vue({
  el: '#app',
  data: {
    bancodedados: [],
    MySearch:''

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/people/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });
  },
  computed: {
      filteredBancodedaos () {
          return this.bancodedados.filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
      }
    }
});

What is the purpose of this code? is to filter by name

The code is working perfectly.

what I need to do is create a flow control in the code below that can be able to filter by name, height, mass, eye_color or by gender.

can be any flux control: if Else, for, switch case or any other.

computed: {
      filteredBancodedaos () {
          return this.bancodedados.filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
      }
    }

I have been able to evolve in this study due to some documentations found on the internet, but not everything I can find... I really need help.

That was my attempt;

computed: {
      filteredBancodedaos () {
          return this.bancodedados;
          .filter((bancodedado) => {
              return bancodedado.name.match(this.MySearch);
        })
        .filter((bancodedado) => {
              return bancodedado.height.match(this.MySearch);
        })
      }
    }

when I was unsuccessful :(

Answer 1

_OLD____________________________________________________

one way to do it is by placing chained filters

filteredBancodedaos () {
  return this.bancodedados
    .filter(this.filtraPorNome)
    .filter(this.filtraPorAltura)
}

and so on, putting the filter functions inside the object 'methods'.

The function filter it is javascript, recommend a read on it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

_NEW_________________________________________________________ I thought you’d have a lot of variables to analyze, in case it’s just one, a code like that should work:

filteredBancodedaos () {
  return this.bancodedados
    .filter((bancoDeDado)=>{
      return ( 
        bancoDeDado.name.match(this.MySearch) ||
        bancoDeDado.height.match(this.MySearch) ||
        bancoDeDado.algumCampo.match(this.MySearch)
      )
    })
}

Another way is to run a function that analyzes all properties and see if any match

function anyPropertyMatch(obj, value) {
  for(let i in obj) {
    if(typeof(obj[i]) == 'string' && obj[i].match(value)){
      //se algum der match retorna true, senão false
      return true;
    }
  }
  return false;
}



filteredBancodedaos () {
  return this.bancodedados
    .filter((item) => anyPropertyMatch(item, this.MySearch))
}