Displaying, Looping, Searching, and Filtering Data Chapter 2model="filterUserState">
</label>
</span>Take note of the exclamation point before the method call on the input field. This means
not, and effectively reverses the result of the function, for example not true is the same as
false and vice versa.
To improve user experience, we can also check that the filtering is active at all before
showing either of the inputs. This can be added by including a secondary check in our v-
show attribute:
<label for="filterQuery" v-show="this.filterField &&
!isActiveFilterSelected()">
Query:
<input type="text" id="filterQuery" v-model="filterQuery">
</label>This now checks that filterField has a value and that the select box is not set to
isActive. Make sure you add this to the radio buttons too.
A further user experience enhancement would be to ensure all the users don't disappear
when the isActive option is chosen. This currently happens because the default is set to a
string, which does not match with either the true or false values of the field. Before
filtering in this field, we should check that the filterUserState variable is either true or
false, that is a Boolean. We can do this by using typeof once more:
if(this.filterField === 'isActive') {
result = (typeof this.filterUserState === 'boolean')?
(this.filterUserState === person.isActive) : true;
}We are using a ternary operator to check that the result to filter on is boolean. If it is, then
filter as we were; if it is not then simply show the row.
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.