Optimizing your App and Using Components to Display Data Chapter 3In order for our filtering to work, we need to pass in one more property-
the isActiveFilterSelected() function. Create another prop, titled statusFilter,
allowing only a Boolean to be the value (as this is what the function equates to), and pass
the function through. Update the filterRow method to use this new value. Our
component now looks like:
Vue.component('team-member', {
template: '#team-member-template',
props: {
person: Object,
filter: Object,
statusFilter: Boolean
},
data() {
return {
currency: '$'
}
},
computed: {
/**
* CSS Classes
*/
activeClass() {
return this.person.isActive? 'active' :
'inactive';
},
balanceClass() {
let balanceLevel = 'success';
if(this.person.balance < 2000) {
balanceLevel = 'error';
} else if (this.person.balance < 3000) {
balanceLevel = 'warning';
}
let increasing = false,
balance = this.person.balance / 1000;
if(Math.round(balance) == Math.ceil(balance)) {
increasing = 'increasing';
}
return [balanceLevel, increasing];
},
/**
* Fields
*/
balance() {
return this.currency +
this.person.balance.toFixed(2);
},