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

Posted 2023-02-23

【中文标题】无法过滤表中使用 Vue 计算的深层数组对象

【英文标题】：Can't filter deep array object in computed with Vue in a table

【发布时间】：2020-07-10 17:44:48

【问题描述】：

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

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

提前谢谢你！

【问题讨论】：

我在代码和框中没有看到任何错误，它似乎正在工作。

ericlippert.com/2014/03/05/how-to-debug-small-programs

【参考方案1】：

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

【讨论】：

!this.search 仅在没有搜索时为真，任何文本为假

嗯，你是对的。仍然由于某种原因，当我在提供的代码和框中更改它时，它仍然像这样工作。

也许计算属性可以检测到一些限制 - 在这种情况下，它可能嵌套得太深？这是我的猜测，我记得在复杂的计算属性中遇到过这样的问题。不幸的是，文档对于解释要触发的计算属性的条件不是很有帮助。

代码已按原样运行，您的编辑与现有代码执行相同的操作。目前还不清楚他想要改变什么。

是的，你是对的。我的猜测是类似的数据太多了。如果您不输入一个非常独特的字符（如“5”），过滤器似乎什么也不做。它确实让我感到困惑。