Vue.js 对数组进行过滤

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

My data:

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

理想情况下，我希望能够列出要过滤的数组项或仅按整个数组进行过滤。

感谢任何帮助，首先在这里发帖，所以要温柔。我对 Python 的经验比对 Javascript 的经验多得多，所以有时我也可能使用不正确的术语。

你离得并不遥远。

为您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() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some?v=example是一个标准数组方法，如果数组的任何元素通过测试，则返回 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))
}

With searchEvents2你真的只留下了一个错误self在那里。要么你需要设置self在执行过滤器之前，或者像我在这里所做的那样，将其转换为箭头函数。

Example https://codepen.io/Kradek/pen/yboKQb?editors=1010.