Vue搜索过滤器以及如何正确过滤数组

时间:2019-06-26 14:38:47

标签: javascript vue.js

我遇到了基于从API接收到的嵌套数据进行过滤的问题。我有组,其中包含类别,类别包含项目。在用户界面中,组被分离出来,我能够正确过滤这些项目。然后在第二个区域中列出每个类别以及该类别中包含的项目。

类似这样的东西:

Groups
    - Group A
    - Group B
--------------
Category A
    - Item A
    - Item B
    - Item C
Category B
    - Item D
    - Item E
Category C
    - Item F
    - Item G
---------------

搜索时,我希望它既可以过滤“组”,也可以过滤“类别”中包含的项目,并且正如我前面提到的,“组”过滤器正在工作。

与“类别”过滤器相关的代码如下:

<div class="items-container">
  <v-expansion-panel 
    v-for='category in categories'
      :value='0'
      expand>
      <v-expansion-panel-content
        expand-icon='keyboard_arrow_up'>
        <template v-slot:header>
          <h4>{{ category.name }}</h4>
        </template>
         <v-list>
            <v-list-tile
              v-for='(item, index) in filteredItems'
              :key='item.name'>
              <v-list-tile-content>
                <v-list-tile-title>
                  <p>{{ item.name }}</p>
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </div>

  data: () => ({
    groups: [],
    categories: [],
  }),
  computed: {
    filteredItems: function() {
       const text = this.searchQuery.toLowerCase() || '';
       let filteredItems = [];

       this.categories.forEach(category => {
          const items = category.items.filter(item => {
            return item.name.toLowerCase().includes(text);
          })
          return filteredItems.push(...items);
        })
        return filteredItems;
    }
  }

过滤实际上在这里起作用,但是当我希望类别仅显示与之关联的项目时,所有11个项目都被放入每个类别中。

我采用的另一种方法是:

const filteredItems = [];
this.categories.forEach(category => {
  const items = category.items.forEach(item => {
    if (item.name.toLowerCase().includes(text)) filteredItems.push(item);
  })
})
return filteredItems;

但这完全相同。

请注意,将category.items放在v-for中可以正确显示相应类别中的项目,但是过滤显然不起作用,因为它没有调用该计算函数。

那我该如何在页面加载时正确显示数据,然后允许进行搜索过滤?

任何帮助将不胜感激!

0 个答案:

没有答案