фильтровать данные из вложенного массива в 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>

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

Один из них - faq-массив, а другой - вложенный массив с содержимым, так как я могу искать ??Я пытался с приведенным выше кодом, но не предоставить то, что я хочу.

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