从 vue.js 中的嵌套数组中过滤数据

Question

我正在使用 Vue.js 进行模板开发。我有一个像 faq 这样的部分，我想在上面添加搜索栏，但问题是我的数据数组是嵌套数据，所以它返回所有数据而不过滤。

Dom

<v-container>
         <v-card>
            <div>
               <v-text-field label="Search" v-model="searchValue"></v-text-field>
            </div>
         </v-card>
      </v-container>
      <div v-for="items of filterfaq" :key="items.category"> 
         <h2>{{ items.category }}</h2>
         <v-expansion-panels>
            <v-expansion-panel v-for="subitems of items.content" :key="subitems.qus">
               <v-expansion-panel-header>{{ subitems.qus }} {{subitems.views}}</v-expansion-panel-header>
               <v-expansion-panel-content>
                  {{ subitems.ans }}
               </v-expansion-panel-content>
            </v-expansion-panel>
         </v-expansion-panels>
      </div>

脚本

import { faq } from '../../data.js';
   export default {
      data: () => ({
         faq,
         searchValue : ''
      }),
      computed:{
         filterfaq () {
            const search = this.searchValue.toLowerCase().trim();
            if (!search) return this.faq;
            return this.faq.filter(item => {
               return item.content.filter(item => {
                  return item.qus.toLowerCase().indexOf(search) > -1
               });
            });
         }
      }
   }

数据.js

export const faq = [
    {
        id:1,
        category:'General Questions',
        content: [
            {
                subid:1,
                qus: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
                ans: ' Phasellus a est id mi gravida congue.',
                views: '225'
            },
            {
                subid:2,
                qus: 'Duis porta ante ac dui iaculis, nec interdum ligula semper?',
                ans: ' Phasellus a est id mi gravida congue.',
                views: '225'
            }
        ]       
    }
 ]

一个是常见问题数组，另一个嵌套数组是内容，那么我该如何搜索？我尝试使用上面的代码，但它没有提供我想要的。

更新： 现在我需要从下一个数组中过滤数据。

export const faq = [
    {
        id:1,
        category:'General Questions',
        content: [
            {
                subid:1,
                qus: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
                ans: ' Phasellus a est id mi gravida congue.',
                views: '225',
                items:[{
                    subqus: 'Lorem ipsum dolor sit amet?'
                    subans: 'Lorem ipsum dolor sit amet.'
                }]
            },
            {
                subid:2,
                qus: 'Duis porta ante ac dui iaculis, nec interdum ligula semper?',
                ans: ' Phasellus a est id mi gravida congue.',
                views: '225',
                items:[{
                    subqus: 'Lorem ipsum dolor sit amet?'
                    subans: 'Lorem ipsum dolor sit amet.'
                }]
            }
        ]       
    }
 ]

我怎样才能做到这一点？

Answer 1

目前您正在过滤faq，因此对于每个项目，您将获取其所有内容或不获取。

你可以这样做：

function filterfaq () {
  const search = this.searchValue.toLowerCase().trim();
  if (!search) return this.faq;
  return this.faq.map(item => {
    return {
      ...item,
      content: item.content.filter(question => {
        return question.qus.toLowerCase().includes(search);
      }),
    }
  });
}