Я не получаю никаких ошибок, но думаю, что мне просто не хватает чего-то, чего я не вижу.
Все мои 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>