无法在表中使用 Vue 计算过滤深度数组对象

Question

I have been trying a lot of ways to filter the data, like using only methods or watchers but I can't achieve what I want. Basically, when I search for something in the input I want only the table to display that item and its way to it. Now I'm trying with computed and I get always an error saying 'filter of undefined' and things like that. This is my computed:

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

And this is my data to filter:

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

I created a sandbox in order to make more easy my explanation => https://codesandbox.io/s/modest-paper-vwes5

Thank you in advance!

Answer 1

Edit: I was wrong, filtering works, but your data are very similar, so entering eg. "bar" will seem to do nothing. You need to enter like "foo 2" or "4" or "5" to see effect.