I am facing an issue with filtering a table containing student details retrieved from a database using v-for. I am attempting to filter the table based on a specific field value. To begin with, I have three input fields located above the table, each bound by v-model to update a corresponding key-value pair in an array of filters. Below is the code for the computed studentsList that I am looping through.
computed:{
filteredStudentList:function(){
console.log(this.lastNameSearch);
let filteredStudents =[]
let filtersArray = [
['lastName',this.lastNameSearch ],
['firstName',this.firstNameSearch],
['studentID',this.studentIDSearch ],
///avoiding comparing to null or empty searchBox
]
let filteredFiltersArray = filtersArray.filter(pair=>{
return pair[1] !=null
})
let dFilteredFiltersArray = filteredFiltersArray.filter(pair=>{
return pair[1] !=""
})
console.log(filtersArray);
console.log(dFilteredFiltersArray);
// add students to the filtered array, if they are not there already and all the searchBoxes are empty
this.studentsList.forEach(student=>{
if (dFilteredFiltersArray.length==0 && filteredStudents.indexOf(student)==-1){
filteredStudents.push(student)
}else{
dFilteredFiltersArray.forEach(([q,a])=>{
Object.entries(student).forEach(([k,v])=>{
if( k==q){
if(!v.match(a)){
console.log(student);
filteredStudents.filter(i=>{
return i !=student
})
}
}
})
})
}
})
console.log(filteredStudents);
return filteredStudents
}
},
However, when I test it, regardless of the letter I type in the search box, it filters out all of the students. I am seeking assistance in identifying what is wrong with my code. Can someone help me with this issue?