Блог

У меня есть 4 фильтра. Все они работают нормально, но как мне объединить firstname и lastname в качестве единого ввода фильтра. Так что, когда пользователь вводит имя, он проверяет как имя, так и фамилию. Сейчас я просто разделяю их.

 <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))
        },
    }
}
 

Вы можете использовать одно поле для имени и фамилии,

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

затем в методах выполните поиск по обоим полям.

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