CSS class functions

The first error we encounter when viewing the application in the browser is:

Property or method "balanceClass" is not defined

The first error is with regards to both the balanceClass and activeClass functions we use. Both of these functions add CSS classes based on the data of the person, which does not change once the component has been rendered.

Because of this, we are able to use the caching found in Vue. Move the methods across to the component but put them in a new computed object, instead of the methods one.

With components, a new instance is created every time it is called, so we can rely on the person object we passed in via a prop and no longer need to pass the person into the function. Remove the parameter from the function and the view—also update any reference to person inside the function to this.person to reference the object stored on the component:

      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];
        }
      },

The part of our component template that utilizes this function should now look like:

      <td v-bind:class="balanceClass">
          {{ format(person, 'balance') }}
      </td>