使用搜索和选择输入进行过滤

Question

我没有收到任何错误，但我认为我只是遗漏了一些我看不到的错误。

我的API都在运作。我只是希望能够有一个搜索栏来搜索名称，然后是一个<select>元素来搜索部门。很确定我的问题与filteredList()。

有关

Employees.vue

<script>

    <template>
    <div class="container">   
        <div class="form-row align-items-center justify-content-center">
            <div class="col-md-6">
                <label>Name</label>
                <input v-model="search" id="inputKeyword" name="inputKeyword" type="text" class="form-control mb-2 form-control-lg">
            </div>
            <div class="col-md-4">
                <label>Department</label>
                <select v-model="selectedDepartment" id="inputfilter" name="inputfilter" class="form-control mb-2 form-control-lg select-department">       
                    <option v-for="department in departments" v-bind:key="department.name">
                        {{ department.name }}
                    </option>
                </select>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-10">
                <ul class="list-unstyled">
                    <employee v-for="employee in filteredList" :employee="employee" :key="employee.id"></employee>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                search: '',
                selectedDepartment: '',
                employees: [],
                meta: null,
                departments: [],
            }
        },
        computed: {
            filteredList() {
                if(this.selectedDepartment == this.employees.department){

                    return this.employees == this.employees.filter(employees => {
                        return employees.department.toLowerCase().includes(this.selectedDepartment.toLowerCase())
                    })

                }else{
                    return this.employees.filter(employees => {
                        return employees.name.toLowerCase().includes(this.search.toLowerCase())
                    }) 
                }                    
            }
        },
        methods: {
            getEmployees(page){
                axios('/employees').then((response) => {
                    this.employees = response.data.data
                    this.meta = response.data.meta
                })
            },
            getDepartments(){
                axios('/departments').then((response) => {
                    // console.log(response.data)
                    this.departments = response.data
                })
            },
        },
        mounted() {
            this.getEmployees()
            this.getDepartments()
        }

    }
</script>