Lately, I've been experimenting with different methods to filter data in my project. I've tried using various approaches like methods and watchers, but haven't quite achieved the desired outcome yet. Essentially, what I'm aiming for is to have the table display only the item that matches the search input along with its path leading to it. Currently, I'm working with computed properties, but I keep encountering an error message saying 'filter of undefined' and similar issues. Here's a snippet of my computed function:
computed: {
filterData() {
return this.testData.filter(
data =>
!this.search ||
data.building.toLowerCase().includes(this.search.toLowerCase()) ||
data.children.some(item =>
item.floor.toLowerCase().includes(this.search.toLowerCase())
)
);
}}
Below is the sample data I am trying to apply filters to:
data: () => ({
search: "",
testData: [
{
id: 1,
building: "foo 1",
children: [
{ id: 11, floor: "bar 1" },
{ id: 12, floor: "bar 2" },
{
id: 13,
floor: "bar 3",
children: [
{
id: 131,
door: "cor 1"
}
]
}
]
},
{
id: 2,
building: "foo 2",
children: [
{ id: 21, floor: "bar 3" },
{ id: 22, floor: "bar 4" },
{
id: 23,
floor: "bar 5",
children: [
{
id: 231,
door: "cor 2"
},
{
id: 232,
door: "cor 3"
}
]
}
]
}
]
To help clarify my issue further, I've created a sandbox environment which you can access via this link: https://codesandbox.io/s/modest-paper-vwes5
Your assistance is greatly appreciated!