如何修改Vue搜索过滤函数，同时匹配title和location两类信息？

架构老林

2026-8-24

调整搜索过滤函数以同时匹配标题和地点

原有功能说明

原本的过滤函数仅根据搜索输入匹配新闻的title字段，代码如下：

const filteredNews = computed(() => {
    if (state.filter) {
        return props.news.filter(item => {
            return state.filter.toLowerCase().split(" ").every(v => item.title.toLowerCase().includes(v))
        });
    } else {
        return props.news;
    }
})

你尝试的代码问题

你修改后的代码里，every回调中使用了逗号运算符，这会导致只有最后一个表达式（item.location.toLowerCase().includes(v)）的结果被返回，而且没有用逻辑运算符将标题和地点的匹配条件关联起来，无法实现“同时匹配标题或地点”的需求。

正确的修改方式

要实现每个搜索关键词要么在标题中，要么在地点中存在，需要用||（逻辑或）连接两个匹配条件，同时确保每个关键词都满足这个“或”判断。优化后的代码如下：

const filteredNews = computed(() => {
    if (state.filter) {
        // 提前转换搜索词为小写并拆分关键词数组
        const filterKeywords = state.filter.toLowerCase().split(" ");
        return props.news.filter(item => {
            // 提前转换当前项的标题和地点为小写，避免重复计算
            const itemTitle = item.title.toLowerCase();
            const itemLocation = item.location.toLowerCase();
            // 每个关键词都要在标题或地点中存在
            return filterKeywords.every(keyword => {
                return itemTitle.includes(keyword) || itemLocation.includes(keyword);
            });
        });
    } else {
        return props.news;
    }
})