Optimizing your App and Using Components to Display Data Chapter 3
this.person.balance.toFixed(2);
},
dateRegistered() {
let registered = new Date(this.registered);
return registered.toLocaleString('en-US');
},
status() {
return output = (this.person.isActive)?
'Active' : 'Inactive';
}
},
methods: {
filterRow() {
let visible = true,
field = this.filter.field,
query = this.filter.query;
if(field) {
if(this.filter.field === 'isActive') {
visible = (typeof query === 'boolean')?
(query === this.person.isActive) : true;
} else {
query = String(query),
field = this.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;
}
}
});
Vue.component('filtering', {
template: '#filtering-template',
props: {
filter: Object
},
methods: {
isActiveFilterSelected() {
return (this.filter.field === 'isActive');
},
changeFilterField(event) {