Не удается отфильтровать объект глубокого массива, вычисленный с Vue в таблице

Question

Я пробовал много способов фильтрации данных, например, используя только методы или средства наблюдения, но я не могу достичь того, чего хочу. По сути, когда я ищу что-то во входных данных, я хочу, чтобы только таблица отображала этот элемент и его путь к нему. Теперь я пытаюсь с 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())
      )
  );
}}

И это мои данные для фильтрации:

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

Я создал песочницу, чтобы упростить мое объяснение => https://codesandbox.io/s/modest-paper-vwes5

Заранее спасибо!

Answer 1

Редактировать: я ошибся, фильтрация работает, но ваши данные очень похожи, поэтому введите, например. «Бар», похоже, ничего не делает. Вам нужно ввести как "foo 2" или "4" или "5", чтобы увидеть эффект.