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

Filtering our content

Now we have control over our people rows and some filter controls in our view, we need to
make our filters work. We are already filtering by our isActive key, so the radio buttons

will be the first to be wired up. We already have the value in a Boolean form for both the
radio buttons values and the key we will be filtering by. For this filter to work, we need to

compare the isActive key with the radio button's value.

If the filterUserState value is true, show users where isActive is true

If the filterUserState value is false, however, only show users where their

isActive value is false as well

This can be written in one line by comparing the two variables:

filterRow(person) {

return (this.filterUserState === person.isActive);

}

On page load, no users will be shown as the filterUserState key is set to neither true

nor false. Clicking one of the radio buttons will reveal the corresponding users.

Let's make the filter work only if the active user option is selected in the dropdown:

filterRow(person) {

let result = true;

if(this.filterField === 'isActive') {

result = this.filterUserState === person.isActive;

}

return result;

}

This code sets a variable to true as a default. We can then return the variable immediately

and our row will show. Before returning, however, it checks the value of the select box and

if is the desired value, will then filter by our radio buttons. As our select box is bound to the

filterField value, as with the filterUserState variable, it updates while we interact

with the app. Try selecting the Active user option in the select box and changing the radio

buttons.