Vue 2中多复选框（数组）筛选文章结果失效问题排查

你的核心问题出在标签筛选的逻辑判断上，具体错误点：

• 逻辑方向颠倒：应该检查勾选的标签集合是否被文章标签匹配，而非用文章标签去包含整个勾选数组
• tag.includes(this.checkedTags)写法错误：tag是单个字符串标签，this.checkedTags是数组，字符串的includes方法无法识别数组类型的参数，导致多选时判断永远不成立

修正方案 #

根据需求，分两种常见场景给出修复代码：

场景1：多选标签为「或逻辑」（文章只要包含任意一个勾选的标签即可） #

把原有的标签判断逻辑替换为：

this.checkedTags.some(checkedTag => article.tags.includes(checkedTag))

场景2：多选标签为「与逻辑」（文章必须包含所有勾选的标签） #

替换为：

this.checkedTags.every(checkedTag => article.tags.includes(checkedTag))

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

以「或逻辑」为例，同时将原代码中效率较低的match替换为更适合字符串包含判断的includes：

computed: {
    searchArticles: function searchArticles() {
        var result = this.articles.filter(function (article) {
            // 处理搜索关键词匹配
            const matchesSearch = article.pagetitle.toLowerCase().includes(this.search.toLowerCase()) 
                || article.content.toLowerCase().includes(this.search.toLowerCase());
            
            // 处理标签筛选
            if(this.checkedTags.length) {
                const matchesTags = this.checkedTags.some(checkedTag => article.tags.includes(checkedTag));
                return matchesTags && matchesSearch;
            } else {
                return matchesSearch;
            }
        }, this);
        return result;
    }
}

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