Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

changeFilter(event) {

this.filter.query = '';

this.filter.field = event.target.value;

}

}

});

Viewing the app in the browser, we should be presented with our list of people with the

correct classes added to the table cells and formatting added to the fields.

Making the filtering work again with props

Re-add the v-show="filterRow()" attribute to the containing tr element in your

template. As our component has the person cached on each instance, we no longer need to
pass the person object to the method. Refreshing the page will give you a new error in your

JavaScript console:

Property or method "filterRow" is not defined on the instance but

referenced during render

This error is because our component has the v-show attribute, showing and hiding based

on our filtering and properties, but not the corresponding filterRow function. As we don't

use it for anything else, we can move the method from the Vue instance to the component,
adding it to the methods component. Remove the person parameter and update the

method to use this.person:

filterRow() {

let visible = true,

field = this.filter.field,

query = this.filter.query;

if(field) {

if(this.isActiveFilterSelected()) {

visible = (typeof query === 'boolean')?

(query === this.person.isActive) : true;

} else {

query = String(query),

field = this.person[field];

if(typeof field === 'number') {

query.replace(this.currency, '');

try {

visible = eval(field + query);

} catch(e) {}

} else {

field = field.toLowerCase();

visible =