I am currently working on Vue.js template development and facing an issue with filtering nested data in a faq section. When I try to add a search bar, the nested data array returns all data without proper 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'
}
]
}
]
The faq array has nested arrays with 'content', making it challenging to search properly. I have attempted the code above but it does not provide the desired results.
Updated: I now need to filter data from the next nested 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 can I achieve this?