如何在 Vuejs/Javascript 中使过滤器不区分大小写
How to make filters case insensitive in Vuejs/Javascript
我正在尝试在 Vuejs 2
中构建一个应用程序,其中我有一个过滤器以从元素数组中找出特定数据。这个过滤器是 case sensitive
但我想要 case insensitive
,下面是我的代码:
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,
}
)
);
}
}
请指导我如何实现。
由于 Array#includes
是 case sensitive 您可以将所有内容转换为小写:
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)
);
您还可以使用 String#test
,它接受带有不敏感 (i) 标志的正则表达式,如果字符串与表达式匹配,则 returns true
,或者 false
如果不是:
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)
);
我正在尝试在 Vuejs 2
中构建一个应用程序,其中我有一个过滤器以从元素数组中找出特定数据。这个过滤器是 case sensitive
但我想要 case insensitive
,下面是我的代码:
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,
}
)
);
}
}
请指导我如何实现。
由于 Array#includes
是 case sensitive 您可以将所有内容转换为小写:
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)
);
您还可以使用 String#test
,它接受带有不敏感 (i) 标志的正则表达式,如果字符串与表达式匹配,则 returns true
,或者 false
如果不是:
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)
);