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

Question

我一直在尝试很多方法来过滤数据，比如只使用方法或观察者，但我无法实现我想要的。基本上，当我在输入中搜索某些内容时，我只希望表格显示该项目及其到达它的方式。现在我正在尝试计算，我总是得到一个错误，说“未定义的过滤器”之类的东西。这是我计算出来的：

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”才能看到效果。