I'm new as a Javascript programmer and I have a difficulty that maybe for some is not a problem.
look closely at the HTML code;
<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 to create a flow control in the code below that you can filter by name , height , mass , eye_color or gender .
can be any control of fluxe: 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 these studies because of some documentation found on the internet, but I can not find everything ... I need a lot of help.
This was my attempt;
computed: {
filteredBancodedaos () {
return this.bancodedados;
.filter((bancodedado) => {
return bancodedado.name.match(this.MySearch);
})
.filter((bancodedado) => {
return bancodedado.height.match(this.MySearch);
})
}
}
I was not successful: (