阵列上的Vue.js过滤

Question

我想在vue.js中使用计算属性来过滤数组。我想搜索关于多个字段，名称，状态，标签等

我的数据：

events: [ 
    { 
    id: 1, 
    name: 'Name of event', 
    url: '#', 
    datetime: '2017-05-10T00:00:00Z', 
    description: 'The full text of the event', 
    state: 'VIC', 
    tags: [ 
     'ordinary', 
     'advanced' 
    ] 
    }, 
    { 
    id: 2, 
    name: 'Another event', 
    url: '#', 
    datetime: '2017-05-12T00:00:00Z', 
    description: 'The full text of the event', 
    state: 'VIC', 
    tags: [ 
     'beginner' 
    ] 
    }, 
    { 
    id: 3, 
    name: 'Great event', 
    url: '#', 
    datetime: '2017-05-18T00:00:00Z', 
    description: 'The full text of the event', 
    state: 'NSW', 
    tags: [ 
     'beginner' 
    ] 
    } 
] 

}，

以下功能正常工作，但我不能工作，如何让它搜索'标签'中的项目（注释掉）。

searchevents: function(){ 
    let result = this.events 
    if (this.filterValue){ 
    result = result.filter(event => 
     event.name.toLowerCase().includes(this.filterValue.toLowerCase()) || 
     event.state.toLowerCase().includes(this.filterValue.toLowerCase()) 
     // event.tags.toLowerCase().values().includes(this.filterValue.toLowerCase()) 
    ) 
    } 
    return result 
} 

下面返回空白阵列中，当我已经在角在VUE完成它但不是这种方法工程确定。

searchevents2: function(){ 
    var searchRegex = new RegExp(this.filterValue,'i') 
    this.events.filter(function(event){ 
    return !self.filterValue || searchRegex.test(event.name) || searchRegex.test(event.state) 
    }) 
} 

理想情况下，我要么能够列出数组项目进行筛选或只是整个数组进行筛选。

感谢任何帮助，先来这里发帖吧，温柔一点。我比Python有更多的Python经验，所以我有时也会使用不正确的术语。

Answer 1

你不是太遥远。

对于您的searchEvents过滤器，您只需添加标签过滤器即可。以下是你如何做到这一点。

searchevents: function(){ 
    let result = this.events 
    if (!this.filterValue) 
     return result 

    const filterValue = this.filterValue.toLowerCase() 

    const filter = event => 
     event.name.toLowerCase().includes(filterValue) || 
     event.state.toLowerCase().includes(filterValue) || 
     event.tags.some(tag => tag.toLowerCase().includes(filterValue)) 

    return result.filter(filter) 
} 

Array.some()是如果阵列中的任何元素通过测试，则返回true标准阵列的方法。

searchevents2: function(){ 
    const searchRegex = new RegExp(this.filterValue,'i') 
    return this.events.filter(event => 
     !this.filterValue || searchRegex.test(event.name) || searchRegex.test(event.state)) 
} 

随着searchEvents2你真的只在那里留下了错误的self。要么在执行过滤器之前设置self，要么像我在这里完成的那样将其转换为箭头函数。

Example。