Optimizing your App and Using Components to Display Data Chapter 3field = field.toLowerCase();
result = field.includes(query.toLowerCase());
}Adding this to our code now ensures our query data is usable no matter what the value.
The issue this now creates is when the user is switching between fields to filter. If you select
the Active user and chose a radio button, the filtering works as expected, however, if you
now switch to Email, or another field, the input box is prepopulated with either true or
false. This instantly filters and will often return no results. This also occurs when
switching between two text filtering fields, which is not the desired effect.
What we want is, whenever the select box is updated, the filter query should clear. Whether
it is the radio buttons or input box, selecting a new field should reset the filter query, this
ensures a new search can begin.
This is done by removing the link between the select box and the filter.field variable
and creating our own method to handle the update. We then trigger the method when the
select box is changed. This method will then clear the query variable and set the field
variable to the select box value.
Remove the v-model attribute on the select box and add a new v-on:change attribute. We
will pass a method name into this that will fire every time the select box is updated.
v-on is a new Vue binding that we've not encountered before. It allows you to bind actions
from elements to Vue methods. For example, v-on:click is one that is used the most
commonly - which allows you to bind a click function to the element. We'll cover more on
this in the next section of the book.
Where v-bind can be abbreviated to just a colon, v-on can be shortened to an @ symbol,
allowing you to use @click="", for example:
<select v-on:change="changeFilter($event)"
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>