Optimizing your App and Using Components to Display Data Chapter 3{{ status }}
</td>
</tr>
</script>And lastly, our Vue instance should look significantly smaller:
const app = new Vue({
el: '#app',
data: {
people: [...],
filter: {
field: '',
query: ''
}
},
methods: {
isActiveFilterSelected() {
return (this.filter.field === 'isActive');
},
/**
* Filtering
*/
filterRow(person) {
let visible = true,
field = this.filter.field,
query = this.filter.query;
if(field) {
if(this.isActiveFilterSelected()) {
visible = (typeof query === 'boolean')?
(query === person.isActive) : true;
} else {
query = String(query),
field = person[field];
if(typeof field === 'number') {
query.replace(this.currency, '');
try {
visible = eval(field + query);
} catch(e) {}
} else {
field = field.toLowerCase();
visible =
field.includes(query.toLowerCase())
}
}
}
return visible;
}