I have a new project using Vue. It includes a div that loops through title and data. Inside the div, there is a search filter and content that renders in p tags. The p tags also go through a loop.
Take a look at the code below:
<div>
<div v-for="(item) in data" :key="item.id">
<div>{{item.title}}</div>
<input type="text" v-model="search" />
<div v-for="(content, j) in filteredLists" :key="j">
<p v-for="(con, k) in content" :key="k">{{con}}</p>
</div>
</div>
</div>
Here is the provided data:
search: "",
data: [
{
id: 1,
title: "Devsrc",
content: {
id: 1,
details: ["ONE_DEV_EMP1", "ONE_DEV_EMP2"]
}
},
{
id: 2,
title: "Devsrc2",
content: {
id: 2,
details: ["TWO_DEV_EMP1", "TWO_DEV_EMP2"]
}
},
{
id: 3,
title: "Devsrc3",
content: {
id: 3,
details: ["THREE_DEV_EMP1", "THREE_DEV_EMP2"]
}
}
]
Check out this computed property:
filteredLists() {
return this.data.map(item => {
return item.content.details.filter(detail => {
return detail.toLowerCase().match(this.search);
})
});
},
The goal here is to only render details for items where the ID matches the content ID.