Vue.js嵌套搜索场景下如何实现仅返回不匹配的结果？

问题原因 #

你当前的过滤逻辑存在逻辑偏差：

• Array.some()的判定规则是只要数组内有至少1个元素满足条件，就返回true
• 你现在写的判断条件是s != this.search，也就是说只要某条post的info数组里有一个元素不等于搜索值，这条post就会被保留
• 只有当某条post的info数组里所有元素都完全等于搜索值时，才会被过滤掉，绝大多数场景下这个条件都不会触发，所以会始终返回完整数组

修正方案 #

如果你要的效果是只要post的info数组里存在和搜索值相等的元素，就把这条post过滤掉，只保留完全不包含搜索值的post，可以从以下两种写法里二选一：

写法1：用every()判断所有元素都不匹配 #

computed: {
  filteredList() {
    // 仅当info中所有元素都不等于搜索值时，才保留当前item
    return this.postList.filter((item) => {
      return item.info.every((s) => s !== this.search);
    });
  },
}

写法2：对some()的匹配结果取反 #

computed: {
  filteredList() {
    // 只要info中存在匹配搜索值的元素，就排除当前item
    return this.postList.filter((item) => {
      return !item.info.some((s) => s === this.search);
    });
  },
}

如果需要做模糊匹配（比如搜索值是"o"就匹配到"one"），只需要把上面代码里的全等判断替换成includes相关逻辑即可。

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