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

result = eval(field + query);

} catch (e) {}

} else {

field = field.toLowerCase();

result = field.includes(query.toLowerCase());

}

}

}

return result;

}

Filtering our filters

Now we have our filtering in place, we need to only show the radio buttons when the

isActive option is selected in our dropdown. Using the knowledge we've learned, this

should be relatively straightforward.

Create a new method that checks the select box value and returns true when Active User

is selected in our dropdown:

isActiveFilterSelected() {

return (this.filterField === 'isActive');

}

We can now use v-show for both the input and radio buttons, reversing the effect when on

the query box:

<label for="filterQuery" v-show="!isActiveFilterSelected()">

Query:

<input type="text" id="filterQuery" v-model="filterQuery">

</label>

<span v-show="isActiveFilterSelected()">

Active:

<label for="userStateActive">

Yes:

<input type="radio" v-bind:value="true" id="userStateActive"

v-model="filterUserState">

</label>

<label for="userStateInactive">

No:

<input type="radio" v-bind:value="false" id="userStateInactive" v-