Vue 3 中 filter() 无返回结果的常见原因：箭头函数隐式返回陷阱-js教程-PHP中文网

Vue 3 中 filter() 无返回结果的常见原因：箭头函数隐式返回陷阱

Vue 3 使用 computed 配合数组 filter() 时，若回调函数使用带花括号 {} 的箭头函数却未显式 return，会导致过滤函数始终返回 undefined，进而使 filter() 视为 false，最终返回空数组。

vue 3 使用 `computed` 配合数组 `filter()` 时，若回调函数使用带花括号 `{}` 的箭头函数却未显式 `return`，会导致过滤函数始终返回 `undefined`，进而使 `filter()` 视为 `false`，最终返回空数组。

在 Vue 3 的响应式逻辑中，filter() 方法依赖回调函数的明确布尔返回值（true 表示保留，false 表示过滤掉）。而 JavaScript 箭头函数存在两种语法形式，其返回行为截然不同：

✅ 简洁体（concise body）：param => expression —— 自动隐式返回表达式结果
❌ 块体（block body）：param => { statements } —— 必须显式写 return，否则默认返回 undefined

你的代码中正是踩中了这个经典陷阱：

// ❌ 错误：块体箭头函数，缺少 return → 每次返回 undefined
(person) => { 
  person.FirstName.toLowerCase().includes(filter.toLowerCase()) 
}

由于 undefined 在布尔上下文中为 falsy，filter() 将所有元素判定为“不匹配”，最终返回空数组 []，导致模板中 v-for="person in filteredPerson" 渲染为空。

✅ 正确写法（任选其一）

方式一：使用简洁体（推荐）—— 更简洁、不易出错

const filteredPerson = computed(() => {
  const filter = filterText.value.trim();
  if (!filter) return jsonDataPersons.value;

  return jsonDataPersons.value.filter(
    person => person.FirstName.toLowerCase().includes(filter.toLowerCase())
  );
});

方式二：使用块体 + 显式 return

const filteredPerson = computed(() => {
  const filter = filterText.value.trim();
  if (!filter) return jsonDataPersons.value;

  return jsonDataPersons.value.filter(person => {
    return person.FirstName.toLowerCase().includes(filter.toLowerCase());
  });
});

? 补充注意事项

空格处理：建议对用户输入调用 .trim()，避免因首尾空格导致搜索失败；
空数组/未初始化保护：jsonDataPersons.value 初始为 ref({})（空对象），但 filter() 要求操作对象为数组。应初始化为 ref([])，并在 API 加载完成前确保数据结构正确：
```
const jsonDataPersons = ref([]); // ✅ 改为数组
```
大小写与性能：.toLowerCase() 是安全的，但若数据量极大，可考虑在 computed 外预处理索引（如构建搜索缓存），此处无需过度优化；
多字段搜索扩展（进阶）：如需同时匹配 FirstName 和 LastName，可改用逻辑或：
```
person.FirstName.toLowerCase().includes(filter) || 
person.LastName.toLowerCase().includes(filter)
```