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.

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.

• javascript
• vue.js
• vuejs2
• vue-filter

• I guess you can use the native string method .toLowerCase() in the conditional check of your strings. This will make both strings in the same case format. – KodeFor.Me Commented Jun 7, 2017 at 6:16

1 Answer 1

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)
);