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

The data you are filtering by does not need to be displayed for our filtering to work,

although a user experience consideration needs to come into play here. Would it make
sense if a table row was being displayed without the data you're filtering it on?

Create the form that will be used for filtering:

<form>

<label for="fiterField">

Field:

<select id="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">

Query:

<input type="text" id="filterQuery">

</label>

<span>

Active:

<label for="userStateActive">

Yes:

<input type="radio" value="true" id="userStateActive"

selected>

</label>

<label for="userStateInactive">

No:

<input type="radio" value="false" id="userStateInactive">

</label>

</span>

</form>

This form includes a select box for selecting a field a filter by, an input box that would

allow the user to enter a query to filter on, and a pair of radio buttons for when we wish to

filter by active and non-active users. The imagined user flow is this: the user would select
the field they wish to filter the data by and either enter their query or select the radio

buttons. When the isActive (Active user) option is selected in the select box, the radio

buttons will be displayed and the input box will be hidden. We have ensured the first radio

button is selected by default to help.