Optimizing your App and Using Components to Display Data Chapter 3The last step is to avoid the repetition of the isActiveFilterSelected() method, as this
is only used once on the team-member component, but several times on the filtering
component. Remove the method from the parent Vue instance, the prop from the team-
member HTML element, and replace the statusFilter variable in the filterRow method
within the team-member component with the contents of the function being passed
through.
The final JavaScript now looks like:
Vue.component('team-member', {
template: '#team-member-template',
props: {
person: Object,
filter: Object
},
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 +