Combining multiple filter list

Question

I have 4 filters. All of them works fine, but how do I combine the firstname and lastname as a single filter input. So that when the user types a name, it'll check both the firstname and lastname. Right now I'm just seperating them.

<template>
<div>
  <input type="text" class="form-control" placeholder="Filter by First name" v-model="search_first_name">
  <input type="text" class="form-control" placeholder="Filter by Last name" v-model="search_last_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(){
            return this.filterByDepartment(this.filterByEmpNumber(this.filterByFirstName(this.filterByLastName(this.employeeList))))
        }
    },
    methods:{
        filterByDepartment: function(employees){
            return employees.filter(employee => !employee.department.indexOf(this.search_department))
        },
        filterByFirstName: function(employees){
            return employees.filter(employee => !employee.firstname.indexOf(this.search_first_name))
        },
        filterByLastName: function(employees){
            return employees.filter(employee => !employee.lastname.indexOf(this.search_last_name))
        },
        filterByEmpNumber: function(employees){
            return employees.filter(employee => !employee.employee_number.indexOf(this.search_empNumber))
        },
    }
}

Besi · Accepted Answer · 2020-12-31 15:02:41Z

1

You can use a single field for first and last name,

<input type="text" class="form-control" placeholder="Filter by Name" v-model="search_by_name">

then in the methods search by both fields.

filterByName: function(employees){
    return employees.filter(employee => !employee.firstname.indexOf(this.search_by_name) || !employee.lastname.indexOf(this.search_by_name))
}

answered Dec 31, 2020 at 15:02

Besi

3303 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combining multiple filter list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related