Optimizing your App and Using Components to Display Data Chapter 3Replace all instances in that function of the variables, for example, the first part of the
method would look like this:
if(field) {
if(this.isActiveFilterSelected()) {
visible = (typeof query === 'boolean')?
(query === person.isActive) : true;
} else {
query = String(query),
field = person[field];Save your file and open the app in the browser to ensure your optimizations haven't broken
the functionality.
The last stage is to reorder the methods into an order that makes sense to you. Feel free to
add comments to separate out the different method types—for example, ones that relate to
CSS classes or filtering. I have also removed the activeStatus method, as we are able to
utilize our format method to format the output of this field. After the optimizations, the
JavaScript code now looks like the following:
const app = new Vue({
el: '#app',
data: {
people: [...],
currency: '$',
filter: {
field: '',
query: ''
}
},
methods: {
isActiveFilterSelected() {
return (this.filter.field === 'isActive');
},
/**
* CSS Classes
*/
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';