Filtering our data

With our data being listed out, we are now going to build filtering ability. This will allow a user to select a field to filter by and a text field to enter their query. The Vue application will then filter the rows as the user types. To do this, we are going to bind some form inputs to various values in the data object, create a new method, and use a new directive on the table rows; v-show.

Building the form

Start off by creating the HTML in your view. Create a <select> box with an <option> for each field you want to filter, an <input> for the query, and a pair of radio buttons – we'll use these to filter active and non-active users. Make sure the value attribute of each <...