如何在VueJS中使用filter筛选数组指定元素？附功能疑问

嘿，我来帮你理清楚这两个问题~

关于filter函数的疑问 #

首先明确：filter函数是对数组进行遍历筛选，返回一个包含所有符合条件元素的新数组。不管原数组里的元素是单个值、对象，甚至是嵌套数组，它都会逐个检查每个元素是否满足你定义的条件，最终返回所有匹配元素组成的数组——所以它不是只筛选单个元素，而是返回所有符合要求的元素集合。

筛选数组元素的代码修正 #

看你提供的代码有几个小细节需要调整，我帮你修正并解释：

修正后的完整代码 #

<template>
  <div class="">
    <!-- 筛选后的结果是单个作品对象的数组，直接遍历即可 -->
    <div v-for="(work, index) in getWorksImgs" :key="index">
      <img :src="work.mother" />
    </div>
  </div>
</template>

<script>
import StorageWorks from '@/storage/works'
export default {
  name: 'Works',
  data() {
    return {
      workImgs: StorageWorks.works,
      sort_id: this.$route.params.sort_id
    }
  },
  computed: {
    getWorksImgs() {
      // 直接返回筛选后的数组，修正变量名错误
      return this.workImgs.filter(work => work.sort === this.sort_id)
    }
  }
}
</script>

关键调整说明 #

• 变量名修正：把computed里的this.worksImgs改成this.workImgs，和你data中定义的变量保持一致；
• 简化模板循环：filter返回的是符合条件的works对象数组，每个元素是单个作品，所以不需要嵌套两层v-for，直接遍历筛选后的数组即可；
• 筛选逻辑验证：当sort_id为'2019'时，filter会遍历数组挑出所有sort字段等于'2019'的元素，恰好返回你预期的2个元素。

预期返回结果示例 #

当sort_id为'2019'时，getWorksImgs的返回值如下：

[
  { works_id: 'works1', sort_title: 'years', sort: '2019', title: 'etd1', year: '2019' },
  { works_id: 'works2', sort_title: 'years', sort: '2019', title: 'etd2', year: '2019' }
]

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