Vue项目中如何按title搜索嵌套对象数组并返回匹配结果？

问题分析 #

你当前的代码存在两个关键问题：

1. 变量名错误：将数据结构中的exampleArray误写为catArray，导致无法正确遍历子数组。
2. 过滤逻辑不完整：外层filter仅判断父项是否存在匹配子项，但没有过滤父项中exampleArray的非匹配子元素，最终会返回完整的父对象而非仅保留匹配的子项。

正确实现代码 #

以下是满足需求的搜索逻辑，会返回所有包含匹配title的父项，且每个父项仅保留exampleArray中符合条件的子元素：

searchItems() {
  const searchTerm = this.search.toLowerCase().trim();
  // 处理空搜索，返回原数据副本（避免修改原数据）
  if (!searchTerm) {
    return [...this.data];
  }

  return this.data
    // 先为每个父项过滤出匹配的子元素
    .map(item => {
      const matchedExamples = item.exampleArray.filter(example => 
        example.title.toLowerCase().includes(searchTerm)
      );
      // 返回新对象，替换exampleArray为匹配结果
      return { ...item, exampleArray: matchedExamples };
    })
    // 过滤掉没有匹配子元素的父项
    .filter(item => item.exampleArray.length > 0);
}

效果验证 #

当输入aaa时，返回结果符合预期：

[{"catId": "1","catTitle": "a","exampleArray": [{"id": "111","title": "aaa"}]}]

逻辑说明 #

1. 统一大小写：将搜索词和目标title都转为小写，实现不区分大小写的搜索。
2. 空搜索处理：如果搜索框为空，返回原数据的副本，避免直接修改原数据引发的问题。
3. 子数组过滤：通过map遍历每个父项，过滤出exampleArray中匹配的子元素并替换原数组。
4. 父项过滤：最后移除那些没有匹配子元素的父项，确保结果仅包含有效匹配项。

内容的提问来源于stack exchange，提问作者finnishdev