Question

我正在Vue.js中进行模板开发。我有一个类似常见问题的部分，我想在上面添加搜索栏，但问题是我的数据数组是嵌套数据，因此它不过滤就返回所有数据。

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

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

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

更新：现在，我需要从下一个数组中筛选数据。

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

当前，您正在过滤import random domain = ["@gmail.com", "@hotmail.com", "@outlook.com", "@yahoo.in", "@protonmail.com"] names = ["John", "Leonardo", "Russel", "Danny", "Mac", "Fredrick", "Mark"] TxtFile = open("textFile.txt","w") for i in range(10): randname = random.randrange(len(names)) randmail = random.randrange(len(domain)) print(names[randname] + domain[randmail]) TxtFile.write(names[randname] + domain[randmail]+"\n") TxtFile.close()，因此对于每个项目，您将不使用其所有内容。

您可以执行以下操作：

faq

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

1 个答案: