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

let query = this.filterQuery,

field = person[this.filterField];

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

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

try {

result = eval(field + query);

} catch(e) {}

} else {

field = field.toLowerCase();

result = field.includes(query.toLowerCase());

}

}

}

return result;

},

isActiveFilterSelected() {

return (this.filterField === 'isActive');

}

}

});

With a small amount of CSS, our people filtering app now looks like the following: