前端过滤表 - 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>

我认为这是一种更简单的方法。 用 sn-p 编辑。