O'Reilly logo

Vue.js 2.x by Example by Mike Street

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Reducing the number of hard-coded variables and properties, and reducing redundancy

When looking at the Vue JavaScript, it is quickly evident that it can be optimized by introducing global variables and setting more local variables in the functions to make it more readable. We can also use existing functionality to stop repeating ourselves.

The first optimization is in our filterRow() method where we check whether filter.field is active. This is also repeated in the isActiveFilterSelected method we use to show and hide our radio buttons. Update the if statement to use this method instead, so the code is as follows: 

      ...    if(this.filter.field === 'isActive') {    result = (typeof this.filter.query === 'boolean') ?        (this.filter.query === person.isActive) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required