嵌套对象数组过滤求助：实时房间搜索功能实现失败

我来帮你梳理下现有代码里的几个关键问题，再给出可行的修正方案：

• 原始数据丢失问题：输入为空时你写的this.roomList = this.roomList完全没意义——如果之前已经执行过过滤，this.roomList已经是过滤后的子集了，根本没法恢复成全部数据。所以必须先保存一份原始的全量房间列表，比如在组件初始化时存到this.originalRoomList里。
• 数据结构访问错误：this.roomList.staticData.rName这个路径大概率不对——如果roomList是数组的话，数组本身没有staticData属性，应该是数组里的每个房间对象包含staticData和rName字段吧？
• 过滤逻辑偏差：你用Object.keys(o).some(...)，如果o是rName字段的话，那o是字符串，Object.keys会遍历字符串的索引，这完全不是你想要的名称匹配逻辑。

修正后的代码示例 #

假设你的房间列表结构是类似这样的嵌套对象数组：

// 示例数据结构
this.originalRoomList = [
  { id: 1, staticData: { rName: "阳光大床房" }, ... },
  { id: 2, staticData: { rName: "商务双床房" }, ... },
  ...
];

那过滤函数可以改成这样：

// 先在组件初始化时（比如created钩子）保存原始全量数据
// this.originalRoomList = [...this.roomList];

search(val) { 
  // 统一把输入转成小写，避免大小写敏感的问题
  const searchVal = val.toLowerCase().trim();
  
  // 输入为空时恢复原始全量数据
  if (!searchVal) { 
    this.roomList = [...this.originalRoomList]; 
    return;
  } 
  
  // 筛选rName包含搜索值的房间
  this.roomList = this.originalRoomList.filter(room => {
    // 用可选链避免数据缺失导致的报错
    if (!room?.staticData?.rName) return false;
    // 把房间名称转成小写后匹配
    return room.staticData.rName.toLowerCase().includes(searchVal);
  });
}

额外调整提示 #

• 如果你的rName是房间对象的直接属性（不是在staticData下），把room.staticData.rName改成room.rName即可。
• 用includes替代indexOf != -1，代码更简洁易读。
• 提前处理搜索值的空格和大小写，能让匹配更精准。

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