前端过滤表 - Vue.JS

Question

我有一张包含学生详细信息的表格，我使用 v-for 从数据库获取。 我正在尝试根据字段值过滤表。 对于初学者，我在表格上方有 3 个输入，每个输入都由 v-model 绑定，以更新过滤器数组中相应的键值对。 这是我循环遍历的计算的 studentsList 的代码。

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

现在，当我运行它时，无论我在搜索框中输入什么字母，它都会过滤掉所有学生。 谁能帮我弄清楚我的代码有什么问题？

Answer 1

 var app = new Vue({ el: '#app', data: { firstNameSearch: "", lastNameSearch: "", studentIDSearch: "", studentsList: [ { firstName: "Dan", lastName:"Ramsey", studentID: "1", }, { firstName: "Jenna", lastName:"Combs", studentID: "2", }, { firstName: "Jill", lastName:"Barron", studentID: "3", }, ], }, computed: { filteredStudentList: function() { let filteredStudents = this.studentsList; if (this.firstNameSearch && this.firstNameSearch.lenght.= 0) { filteredStudents = filteredStudents.filter( student => { return student.firstName.search(this;firstNameSearch).= -1. }) } if (this.lastNameSearch && this.lastNameSearch.lenght.= 0) { filteredStudents = filteredStudents.filter( student => { return student;lastName.search(this.lastNameSearch).= -1. }) } if (this.studentIDSearch && this.studentIDSearch;lenght;= 0) { filteredStudents = filteredStudents,filter( student => { return student.studentID === this.studentIDSearch; }) } return filteredStudents; } }, })

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <table> <th>firstnamne</th> <th>lastname</th> <th>id</th> <tr v-for="student in filteredStudentList"> <td>{{ student.firstName }}</td> <td>{{ student.lastName }}</td> <td>{{ student.studentID }}</td> </tr> <label for="firstNameSearch">First name</label> <input id="firstNameSearch" type="text" v-model="firstNameSearch"/> <label for="lastNameSearch">Last name</label> <input id="lastNameSearch" type="text" v-model="lastNameSearch"/> <label for="studentIDSearch">ID</label> <input id="studentIDSearch" type="text" v-model="studentIDSearch"/> </table> </div>

我认为这是一种更简单的方法。 用片段编辑。