Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1

Optimizing your App and Using Components to Display Data Chapter 3


}

let increasing = false,
balance = person.balance / 1000;
if(Math.round(balance) ==
Math.ceil(balance)) {
increasing = 'increasing';
}
return [balanceLevel, increasing];
},
/**
* Display
*/
format(person, key) {
let field = person[key],
output = field.toString().trim();
switch(key) {
case 'balance':
output = this.currency +
field.toFixed(2);
break;
case 'registered':
let registered = new Date(field);
output = registered.toLocaleString('en-US');
break;
case 'isActive':
output = (person.isActive)? 'Active' :
'Inactive';
}
return output;
},
/**
* Filtering
*/
changeFilter(event) {
this.filter.query = '';
this.filter.field = event.target.value;
},
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];
Free download pdf