Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

field = field.toLowerCase();

result =

field.includes(query.toLowerCase());

}

}

}

return result;

},

isActiveFilterSelected() {

return (this.filterField === 'isActive');

}

}

});

Looking at the preceding code, there are some improvements we can make. These include:

Reducing the number of filter variables and grouping logically

Combining the format functions

Reducing the number of hard-coded variables and properties

Re-ordering methods into a more logical order

We'll cover these points individually so we have a clean code base for building components
with.

Reducing the number of filter variables and

grouping logically

The filtering currently uses up three variables, filterField, filterQuery,

and filterUserState. The only thing that currently links these variables is the name,

rather than being in an object of their own to link them systematically. Doing this avoids

any ambiguity as to whether they are related to the same component or just coincidentally

the same. In the data object, create a new object titled filter and move each variable

inside:

data: {

people: [..],

currency: '$',

filter: {

field: '',

query: '',

userState: '',

}

}