带姓名搜索框与部门Select的员工列表过滤功能异常（无报错）

Hey there! Let's troubleshoot why your name search and department filter aren't working in your Employees.vue component. Since you suspect the filteredList() method, let's walk through the most common issues and fixes step by step:

1. First, Check if Your Filters Are Bound to Reactive Data #

Make sure your search input and <select> are properly linked to reactive properties in your component's data section. If the values aren't updating as users type or select, your filter logic will never trigger changes.

Example of correct v-model binding:

<template>
  <div class="container">
    <!-- Name search input -->
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="Search by name..."
    />
    <!-- Department select -->
    <select v-model="selectedDepartment">
      <option value="">All Departments</option>
      <option value="Engineering">Engineering</option>
      <option value="Marketing">Marketing</option>
    </select>
    <!-- Render filtered list -->
    <div v-for="employee in filteredList" :key="employee.id">
      {{ employee.name }} - {{ employee.department }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [], // Your fetched employee data
      searchQuery: '',
      selectedDepartment: ''
    }
  },
  // ... rest of your code
}
</script>

2. Fix the filteredList Logic #

If your binding is correct, the next issue is almost certainly in how you're combining the name and department filters. Common mistakes include:

• Only checking one filter condition (name OR department, not both)
• Case-sensitive matching that misses partial inputs
• Not handling the "all departments" default state

Here's a robust implementation using a computed property (computed properties automatically re-run when their dependencies change, which is perfect for filters):

computed: {
  filteredList() {
    return this.employees.filter(employee => {
      // Match name: case-insensitive, partial match
      const nameMatch = employee.name.toLowerCase().includes(this.searchQuery.toLowerCase());
      
      // Match department: if a department is selected, match exactly; else pass all
      const deptMatch = this.selectedDepartment 
        ? employee.department === this.selectedDepartment 
        : true;

      // Both conditions must be true to keep the employee
      return nameMatch && deptMatch;
    });
  }
}

⚠️ Note: If you were using a method instead of a computed property for filteredList, it won't automatically update when searchQuery or selectedDepartment changes. Switching to computed is critical here.

3. Verify You're Rendering the Filtered List #

Double-check that your v-for loop is iterating over filteredList and not the raw employees array. It's an easy mistake to make, and it would make your filters appear completely non-functional.

4. Debug with Console Logs #

If you're still stuck, add console logs to your computed property to see what's happening:

computed: {
  filteredList() {
    console.log("Current search query:", this.searchQuery);
    console.log("Selected department:", this.selectedDepartment);
    const filtered = this.employees.filter(...); // Your filter logic
    console.log("Filtered results:", filtered);
    return filtered;
  }
}

This will help you confirm if:

• The input values are updating correctly
• The filter logic is producing the expected results
• The raw employee data has the correct name and department fields

5. Check for Data Mismatches #

Ensure the department values in your employee data exactly match the value attributes of your <option> elements. For example, if your data uses "Eng" but your option has value="Engineering", the filter will never match.

内容的提问来源于stack exchange，提问作者Ash Baker