filter data from nested array in vue.js

Question

I am working on template development in Vue.js. I have a section like a faq and I want to add the search bar on it but the issue is my data array is nested data so it returns all data without filtering.

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>

Script

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

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

One is faq array and another nested array is content so how can i search?? I tried with above code but its not provide what i want.

Updated: Now I need to filter data from next to next array.

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

How I can achieve this?

Answer 1

Currently you are filtering faq so for each item you are going to take either all its content or none.

You could do something like this:

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