I'm trying to build an application in Vuejs 2
where I'm having a filter to find out the specific data from an array of elements. This filter is case sensitive
but I want to have case insensitive
, following is my code:
tableFilter: function () {
if( this.model ) {
return this.model.filter(
item =>
item.clients_association.includes( this.search_by_name ) &&
item.event_type.includes( this.search_by_event_type )
)
.map(
d => (
{
id: d.id,
client_names: d.clients_association,
stellar_participants: d.stellar_participants,
contact_participants: d.contacts_association,
}
)
);
}
}
Please guide me how can I achieve it.
Since Array#includes
is case sensitive you can convert everything to lower case:
const searchTerm = this.search_by_name.toLowerCase();
const searchEvent = this.search_by_event_type.toLowerCase();
this.model.filter((item) =>
item.clients_association.toLowerCase().includes(searchTerm) &&
item.event_type.toLowerCase().includes(searchEvent)
);
You can also use String#test
, which accepts a regex with the insensitive (i) flag, and returns true
if the string matches the expression, or false
if not:
const searchTerm = new RegExp(this.search_by_name, 'i');
const searchEvent = new RegExp(this.search_by_event_type, 'i');
this.model.filter((item) =>
searchTerm.test(item.clients_association) &&
searchEvent.test(item.event_type)
);