无法在 table 中过滤使用 Vue 计算的深层数组对象

Question

我一直在尝试很多方法来过滤数据，比如只使用方法或观察者，但我无法实现我想要的。基本上，当我在输入中搜索某些内容时，我只希望 table 显示该项目及其到达方式。现在我正在尝试使用 computed 并且我总是得到一个错误说 'filter of undefined' 和类似的东西。这是我计算的：

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

编辑：我错了，过滤有效，但你的数据非常相似，所以输入例如。 "bar" 似乎什么都不做。您需要输入 "foo 2" 或 "4" 或 "5" 才能看到效果。

无法在 table 中过滤使用 Vue 计算的深层数组对象

Can't filter deep array object in computed with Vue in a table

javascript

filter

vue.js

computed-properties