陣列上的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。