gpt4 book ai didi

arrays - Vue.js 过滤数组

转载 作者:搜寻专家 更新时间:2023-10-30 22:44:36 25 4
gpt4 key购买 nike

我正在尝试使用 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
}

以下返回一个空白数组,当我在 angular 中而不是在 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)
})
}

理想情况下,我希望能够列出要过滤的数组项,或者只过滤整个数组。

感谢任何帮助,首先在这里发帖,所以要温柔。与 Javascript 相比,我在 Python 方面的经验要丰富得多,因此我有时也会使用不正确的术语。

最佳答案

你离得不远。

对于您的 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 .

关于arrays - Vue.js 过滤数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43772649/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com