Vue中API返回数据按name字段关键词过滤并展示关联字段实现咨询

1. 数据分层存储 #

• 接口请求成功后，把返回的全量results数组单独存在一个响应式变量里（比如命名为originalResultList），不要直接修改原始数据，所有过滤操作都基于这个全量数据集执行，避免每次搜索都重复调用接口。

2. 修正过滤逻辑 #

• 不要用forEach遍历后给结果变量赋值布尔值，改用数组的filter方法：遍历全量数据集，对每条数据的document.name和搜索关键词统一转小写后做匹配，如果匹配成功就保留整条原始数据，最终输出符合条件的完整对象数组，存在另一个响应式变量（比如命名为filteredResultList）里，这样你需要的name、documentId、description等字段都会完整保留。
• 匹配规则可以按需调整：如果需要模糊匹配任意连续字符，直接用xxx.toLowerCase().includes(搜索词.toLowerCase())即可；如果要求匹配完整单词，再做拆分空格后判断的逻辑。

3. 优化触发逻辑（可选） #

• 可以把过滤后的结果列表做成计算属性，只要搜索关键词termSearch或者原始全量数据发生变化，自动重新计算过滤结果，无需手动调用过滤方法，适配输入框实时搜索的场景。

4. 页面渲染逻辑 #

• 模板中v-for直接遍历filteredResultList，key绑定每条数据的唯一值（比如documentId或者返回的id字段即可）。
• 插值时直接取对应字段即可：原始大小写的标题取item.document.name，链接用的ID取item.document.documentId，描述取item.description。

5. 边界情况适配 #

• 可以加判断逻辑，搜索词为空时默认返回全量数据或者提示用户输入关键词；接口请求未完成时加加载状态，避免渲染时报变量不存在的错误。

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