Vue3中filter()方法回调返回布尔值但无结果的问题求助

核心问题：filter回调未返回判断结果 #

你在filteredPerson的计算属性中，Array.filter()的箭头函数使用了大括号包裹代码块，但没有显式返回判断表达式的结果。箭头函数如果包含大括号代码块，必须手动写return语句，否则默认返回undefined——而filter会将返回undefined的元素全部过滤，最终导致始终无结果返回。

错误代码片段 #

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

修正方式（二选一） #

1. 显式添加return：

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

2. 去掉大括号，箭头函数自动返回表达式结果（更简洁）：

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

次要优化点 #

1. 修正数据初始类型
   你的后端返回数据是数组，但jsonDataPersons初始值设为ref({})（对象），这会导致组件初始化时调用filter方法报错（对象没有filter属性）。应初始化为空数组：

const jsonDataPersons = ref([])

2. 简化搜索文本的初始化
   new String会创建String对象，没必要使用，直接用原始字符串类型初始化更符合Vue的使用习惯：

const filterText = ref('')

完整修正后的计算属性代码 #

const filteredPerson = computed(() => {
    const filter = filterText.value.trim().toLowerCase(); // 新增trim处理输入空格
    if (!filter) { return jsonDataPersons.value }

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

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