Changing CSS classes

As with any HTML attribute, Vue is able to manipulate CSS classes. As with everything in Vue, this can be done in a myriad of ways ranging from attributes on the object itself to utilizing methods. We'll start off adding a class if the user is active.

Binding a CSS class is similar to other attributes. The value takes an object that can calculate logic from within the view or be abstracted out into our Vue instance. This all depends on the complexity of the operation.

First, let's add a class to the cell containing the isActive variable if the user is active:

      <td v-bind:class="{ active: person.isActive }">
        {{ activeStatus(person) }}
      </td>

The class HTML attribute is first prepended by v-bind: to let Vue know it needs to process the attribute. The value is then an object, with the CSS class as the key and the condition as the value. This code toggles the active class on the table cell if the person.isActive variable equates to true. If we wanted to add an inactive class if the user was not active, we could add it to the object:

      <td v-bind:class="{ active: person.isActive, inactive: 
      !person.isActive }">
        {{ activeStatus(person) }}
      </td>

Here's we've used the exclamation point again to reverse the status. If you run this app, you should find the CSS classes applied as expected.

If we're just applying two classes based on one condition, a ternary if statement can be used inside of the class attribute:

      <td v-bind:class="person.isActive ? 'active' : 'inactive'">
        {{ activeStatus(person) }}
      </td>

Note the single quotes around the class names. Once again, however, logic has started to creep into our View and, should we wish to also use this class elsewhere, is not very scalable. 

Create a new method on our Vue instance called activeClass and abstract the logic into that — not forgetting to pass the person object in:

      activeClass(person) {
        return person.isActive ? 'active' : 'inactive';
      }

We can now call that method in our view:

      <td v-bind:class="activeClass(person)">
        {{ activeStatus(person) }}
      </td>

I appreciate this is quite a simple execution; let's try a slightly more complex one. We want to add a conditional class to the balance cell depending on the value. If their balance is under $2000, we will add an error class. If it is between $2000 and $3000, a warning class will be applied and if it is over $3000 a success class will be added.

Along with the error, warning and success classes, a class of increasing will be added if the balance is over $500. For example, a balance of $2,600 will get both the warning, and increasing classes, whereas $2,400 would only receive the warning class.

As this contains several bits of logic, we will create a use a method in our instance. Create a balanceClass method and bind it to the class HTML attribute of the cell containing the balance. To begin with, we'll add the error, warning and success classes.

      <td v-bind:class="balanceClass(person)">
        {{ formatBalance(person.balance) }}
      </td>

In the method, we need to access the balance property of the person passed in and return the name of the class we wish to add. For now, we'll return a fixed result to verify that it's working:

      balanceClass(person) {
        return 'warning';
      }

We now need to evaluate our balance. As it's already a number, comparing it against our criteria won't involve any conversions:

      balanceClass(person) {
        let balanceLevel = 'success';

        if(person.balance < 2000) {
          balanceLevel = 'error';
        } else if (person.balance < 3000) {
          balanceLevel = 'warning';
        }

        return balanceLevel;
      }

In the preceding method, the class output gets set to success by default, as we only need to change the output if it is less than 3000. The first if checks whether the balance is below our first threshold – if it does, it sets the output to error. If not, it tries the second condition, which is to check whether the balance is below 3000. If successful, the class applied becomes warning. Lastly, it outputs the chosen class, which applies directly to the element.

We now need to consider how we can do the increasing class. To get it to output alongside the existing balanceLevel class, we need to convert the output from a single variable to an array. To verify that this works, hardcode the extra class to the output:

      balanceClass(person) {
        let balanceLevel = 'success';
        if(person.balance < 2000) {
          balanceLevel = 'error';
        } else if (person.balance < 3000) {
          balanceLevel = 'warning';
        }
        return [balanceLevel, 'increasing'];
      }

This adds the two classes to the element. Convert the string to a variable and set to false by default. Vue won't output anything for a false value passed in the array.

To work out if we need the increasing class, we need to do some calculations on the balance. As we want the increasing class if the balance is above 500 no matter what range it is in, we need to round the number and compare:

      let increasing = false,
          balance = person.balance / 1000;

      if(Math.round(balance) == Math.ceil(balance)) {
        increasing = 'increasing';
      }

Initially, we set the increasing variable to false as a default. We also store a version of the balance pided by 1000. The means our balances turn out to be 2.45643 instead of 2456.42. From there, we compare the number after it has been rounded by JavaScript (For example 2.5 becomes 3, whereas 2.4 becomes 2) to the number that has been forced to round up (example 2.1 becomes 3, along with 2.9).

If the number output is the same, the increasing variable is set to the string of the class we want to set. We can then pass this variable along with the balanceLevel variable out as an array. The full method now looks like the following:

      balanceClass(person) {
        let balanceLevel = 'success';

        if(person.balance < 2000) {
          balanceLevel = 'error';
        } else if (person.balance < 3000) {
          balanceLevel = 'warning';
        } 

        let increasing = false,
            balance = person.balance / 1000;

        if(Math.round(balance) == Math.ceil(balance)) {
          increasing = 'increasing';
        }

        return [balanceLevel, increasing];
      }