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


},

methods: {
activeStatus(person) {
return (person.isActive)? 'Active' :
'Inactive';
},
activeClass(person) {
return person.isActive? 'active' :
'inactive';
},
balanceClass(person) {
let balanceLevel = 'success';
if(person.balance < 2000) {
balanceLevel = 'error';
} else if (person.balance < 3000) {
balanceLevel = 'warning';
}
let increasing = false,
balance = person.balance / 1000;
if(Math.round(balance) ==
Math.ceil(balance)) {
increasing = 'increasing';
}
return [balanceLevel, increasing];
},
formatBalance(balance) {
return this.currency + balance.toFixed(2);
},
formatDate(date) {
let registered = new Date(date);
return registered.toLocaleString('en-US');
},
filterRow(person) {
let result = true;
if(this.filterField) {
if(this.filterField === 'isActive') {
result = (typeof this.filterUserState
=== 'boolean')? (this.filterUserState
=== person.isActive) : true;
} else {
let query = this.filterQuery,
field = person[this.filterField];
if(typeof field === 'number') {
query.replace(this.currency, '');
try {
result = eval(field + query);
} catch(e) {}
} else {
Free download pdf