I am trying to combine the firstname and lastname as a single filter input. Currently, I have 4 filters that work fine individually. How can I create a single input for both first name and last name so that when a user types a name, it will search for matches in both fields? Right now, I have separate inputs for first name and last name.
<template>
<div>
<input type="text" class="form-control" placeholder="Filter by Full Name" v-model="search_full_name">
<input type="text" class="form-control" placeholder="Filter by Employee Number" v-model="search_empNumber">
<input type="text" class="form-control" placeholder="Filter by Department" v-model="search_department">
</div>
<table class="table table-hover rounded-lg tbl-responsive">
<thead>
<tr>
<th>Emp ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Employee Number</th>
<th>Contact</th>
<th>Department</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr v-for="(employee,index) in filteredEmployee" :key="employee.id">
<td>{{employee.id}}</td>
<td>{{employee.firstname}}</td>
<td>{{employee.lastname}}</td>
<td>{{employee.employee_number}}</td>
<td>{{employee.contact}}</td>
<td>{{employee.department}}</td>
<td>{{employee.position}}</td>
<td>{{employee.basic_salary}}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
computed: {
filteredEmployee: function(){
// Combines all the filters
return this.filterByDepartment(this.filterByEmpNumber(this.filterByFullName(this.employeeList)))
}
},
methods:{
filterByDepartment: function(employees){
return employees.filter(employee => !employee.department.indexOf(this.search_department))
},
filterByFullName: function(employees){
let searchName = this.search_full_name.toLowerCase();
return employees.filter(employee =>
(employee.firstname.toLowerCase().includes(searchName) || employee.lastname.toLowerCase().includes(searchName)));
},
filterByEmpNumber: function(employees){
return employees.filter(employee => !employee.employee_number.indexOf(this.search_empNumber))
},
}
}