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

Displaying, Looping, Searching, and Filtering Data Chapter 2

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

}

Filtering and custom classes

We now have a fully fledged user list/register that has filtering on selected fields and
custom CSS classes depending on the criteria. To recap, this is what our view looks like

now we have the filter in place:

<div id="app">

<form>

<label for="fiterField">

Field:

<select id="filterField" v-model="filterField">

<option value="">Disable filters</option>

<option value="isActive">Active user</option>

<option value="name">Name</option>

<option value="email">Email</option>

<option value="balance">Balance</option>

<option value="registered">Date registered</option>

</select>

</label>

<label for="filterQuery" v-show="this.filterField &&

!isActiveFilterSelected()">