Vue.js filterBy()方法返回错误值问题求助

嘿，我猜你是在Vue项目里做基于标签的作品筛选功能对吧？遇到filterBy()出错的核心原因是：Vue 2及更高版本已经移除了filterBy这个内置过滤器，官方现在更推荐用计算属性或者方法来实现数据过滤逻辑～

先结合你给出的数据结构，给你两种最常用的过滤方案，你可以根据需求选：

准备工作：明确需求 #

你的tags数组应该是用来存储「选中的筛选标签」对吧？我们分两种场景处理：

• 场景1：只显示包含所有选中标签的作品（比如选了red+green，只留同时有这两个标签的作品）
• 场景2：显示包含任意一个选中标签的作品（选了red+green，只要有其中一个标签的作品都留）

实现方案：用计算属性做响应式过滤 #

计算属性是Vue里处理这类响应式数据转换的最佳选择，它会自动依赖tags和works的变化重新计算结果：

data() {
  return {
    tags: ['red', 'green', 'blue'], // 假设这是选中的筛选标签
    works: [
      { id: 1, name: 'one', img: '', tags: ['red', 'green'] },
      { id: 2, name: 'two', img: '', tags: ['red', 'blue'] },
      { id: 3, name: 'three', img: '', tags: ['green', 'blue'] },
      { id: 4, name: 'four', img: '', tags: ['green'] },
      { id: 5, name: 'five', img: '', tags: [] } // 补全缺失的tags属性，避免报错
    ]
  }
},
computed: {
  filteredWorks() {
    // 如果没有选中任何标签，直接返回全部作品
    if (this.tags.length === 0) {
      return this.works;
    }

    // --- 场景1：筛选包含所有选中标签的作品 ---
    return this.works.filter(work => {
      // 用every检查当前作品的tags是否包含所有选中标签
      // 可选链?.避免作品没有tags属性时报错
      return this.tags.every(selectedTag => work.tags?.includes(selectedTag));
    });

    // --- 场景2：筛选包含任意一个选中标签的作品 ---
    // return this.works.filter(work => {
    //   return this.tags.some(selectedTag => work.tags?.includes(selectedTag));
    // });
  }
}

模板里使用过滤后的结果 #

在模板里直接遍历filteredWorks就行，它会自动响应tags的变化更新内容：

<div v-for="work in filteredWorks" :key="work.id">
  <h3>{{ work.name }}</h3>
  <p>标签：{{ work.tags.join(', ') }}</p>
</div>

额外提示 #

• 注意处理works里对象没有tags属性的情况（比如你代码里的第5个对象），用work.tags?.includes()可以避免出现Cannot read property 'includes' of undefined的错误
• 如果你的tags数组是用来存储「所有可选标签」，而不是「选中的标签」，那你需要额外加一个selectedTags数组来存用户选中的标签，再用它来过滤

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