Optimizing your App and Using Components to Display Data Chapter 3We are building this app for scalability, so it's advisable to make computed functions for
each value—it will also have the advantage of tidying up our template. Create three
functions in the computed object titled balance, dateRegistered, and status. Copy the
corresponding parts of the format function across to each one, updating the reference of
person to this.person once more.
Where we were retrieving the field using a function parameter, you can now fix the value
in each function. You will also need to add a data object with the currency symbol for the
balance function—add this after the props:
data() {
return {
currency: '$'
}
},As the team-member component is the only place our currency symbol is used, we can
remove it from the Vue app itself. We can also remove the format function from our parent
Vue instance.
In total, our Vue team-member component should look like:
Vue.component('team-member', {
template: '#team-member-template',
props: {
person: 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';