Vue.js过滤数组 [英] Vue.js filtering on array

问题描述

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

I am trying to filter an array using a computed property in vue.js. I would like to search on on multiple fields, name, state, tags etc.

我的数据:

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'
    ]
  }
]

}，

以下功能按预期工作，但是我无法弄清楚如何搜索标签"中的项目(注释掉).

The following function works as expected, however I cant work out how to have it search the items in 'tags' (commented out).

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完成此方法时，该方法可以正常工作.

The following returns a blank array, this method works ok when i have done it in angular but not in 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)
  })
}

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

Ideally I would either like to be able to list array items to filter by or just filter by the entire array.

感谢您的帮助，请在此处先发表文章，以便保持温柔.我在Python方面比在Java方面拥有更多的经验，因此我有时可能还会使用不正确的术语.

Appreciate any help, first post here so be gentle. I have a lot more experience with Python than Javascript so i may also use incorrect terminology at times.

推荐答案

您离酒店不太远.

对于您的searchEvents过滤器，您只需要添加标签过滤器.这是您可能的方法.

For your searchEvents filter, you just needed to add the tag filter. Here's how you might do that.

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.

Array.some() is a standard array method that returns true if any element of the array passes your test.

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，或者像我在这里所做的那样，将其转换为箭头功能.

With searchEvents2 you really only left an errant self in there. Either you needed to set self before you executed the filter, or, as I have done here, turned it into an arrow function.

示例.

这篇关于Vue.js过滤数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！