Displaying, Looping, Searching, and Filtering Data Chapter 2If you want full customization of the display of your date, there are several libraries
available, such as moment.js, that give you much more flexibility over the output of any
date and time-based data. For this method, we are going to use a native JavaScript function,
to LocaleString():
formatDate(date) {
let registered = new Date(date);
return registered.toLocaleString('en-US');
}With the registered date, we pass it to the native Date() function so JavaScript knows to
interpret the string as a date. Once stored in the registered variable, we return the object as
a string with the toLocaleString() function. This function accepts a huge array of
options (as outlined on MDN) to customize the output of your date. For now, we'll pass it
the locale we wish to display and use the defaults for that location. We can now utilize our
method in the view:
<td>{{ formatDate(person.registered) }}</td>Each table row should now look like the following:
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
each field you want to filter, an 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