Question

我遇到了基于从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中可以正确显示相应类别中的项目，但是过滤显然不起作用，因为它没有调用该计算函数。

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

任何帮助将不胜感激！

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

0 个答案: