Как сделать так чтобы данные фильтровались, сейчас на данный момент они сортируются, но мне пока что не понятно, потому что новичок в этом деле
Вот код по формирование данных
<template>
<div>
<div class="col-sm-2">
<div class="form-group">
<input type="text" class="form-control" placeholder="Фамилия" v-model="filterItems.last_name">
{{ filterItems.last_name }}
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Имя" v-model="filterItems.name">
{{ filterItems.name }}
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Отчество" v-model="filterItems.patronymic">
{{ filterItems.patronymic }}
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="email" v-model="filterItems.email">
{{ filterItems.email }}
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="phone" v-model="filterItems.phone">
{{ filterItems.phone }}
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Непосредственный руководитель" v-model="filterItems.immediate_supervisor">
{{ filterItems.immediate_supervisor }}
</div>
</div>
<table class="table">
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll" @click="select"></th>
<th v-for="column in data_columns" @click="sortBy(column.name)">{{ column.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(employee, index) in sortedUsers" :key="employee.id">
<td><input type="checkbox" :value="employee.id" v-model="selected"></td>
<td>
<a id="show-modal" @click="select_item(index)">{{ employee.last_name+' '+employee.name+' '+employee.last_name }}</a>
</td>
<td>{{ employee.email }}</td>
<td>{{ employee.phone }}</td>
<td>{{ employee.immediate_supervisor }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "BaseTable",
props:[
'data_table',
'data_columns'
],
data(){
return {
filterItems: {
last_name: '',
name: '',
patronymic: '',
email: '',
phone: '',
immediate_supervisor: '',
},
sort: 'id',
sortDir: 'asc',
itemsNew: [],
items: [],
item:{},
selected: [],
selectAll: false,
showModal: false
}
},
methods: {
select_item(index){
this.item = this.items[index];
this.showModal = true;
},
select() {
this.selected = [];
if (!this.selectAll) {
for (let i in this.$props.data_table){
this.selected.push(this.$props.data_table[i].id);
}
}
},
sortBy: function(s) {
if (s === this.sort) {
this.sortDir = (this.sortDir === 'asc') ? 'desc' : 'asc';
} else {
this.sortDir = 'asc';
}
this.sort = s;
},
},
computed: {
sortedUsers: function() {
return this.items.sort((a, b) => {
let dir = (this.sortDir === 'asc') ? 1 : -1;
if (a[this.sort] < b[this.sort]) {
return -1 * dir;
} else if (a[this.sort] > b[this.sort]) {
return 1 * dir;
} else {
return 0;
}
}).filter(() => {
let filterItems = this.filterItems;
this.itemsNew = this._.filter(this.items, function (item) {
return item.name === filterItems.name ||
item.last_name === filterItems.last_name ||
item.patronymic === filterItems.patronymic ||
item.email === filterItems.email ||
item.phone === filterItems.phone ||
item.immediate_supervisor === filterItems.immediate_supervisor;
});
return this.itemsNew[0] ? this.itemsNew : this.items;
});
},
},
created(){
const employeeApi = new restApi(this.$props.data_table);
employeeApi.list().then(response => {
this.items = response.data;
}).catch(error => {
debugger;
});
}
}
</script>
<style scoped>
</style>
то есть весь код по формирование находиться sortedUsers вcomputed
