Vuejs博客文章标签过滤器

Question

我目前正在使用Vue.js和firebase构建一个应用程序，并尝试在我的博客组件中添加一个按标签过滤的功能。

我是这样做的：

matters () {
        return this.$store.getters.loadedMatters
      },
      footprints () {
        return this.$store.getters.loadedFootprints
      },
      filteredMatters: function () {
        if (this.currentFilter === "all") {
          return this.matters;
        }
        return this.matters.filter((matter) => {
          for (let obj in matter.footprint) {
            return matter.footprint[obj] === this.currentFilter;
          }
        });
      }

它是有效的，但只能处理存储在我的博客帖子标签下的数组的第一个字符串

<v-chip v-bind:class="{ active: currentFilter === 'all' }" v-on:click="setFilter('all')" color="primary" small class="mt-3">
            All
          </v-chip>
          <v-chip v-for="footprint in footprints" :key="footprint" v-bind:class="{ active: currentFilter === footprint }" v-on:click="setFilter(footprint)" color="primary" small class="mt-3">
            {{ footprint }}
          </v-chip>

当I console.log(matter.footprint)时，我从所有帖子中获取所有数组，而不是获取所选帖子的数组。

return this.matters.filter((matter) => {
        console.log(matter.footprint)
          for (let obj in matter.footprint) {

            return matter.footprint[obj] === this.currentFilter;
          }
        });

日志：

(3) ["Nature", "Ecosystems", "Ecology"]
Matter.vue?9a91:136 ["Writings"]
Matter.vue?9a91:136 ["Chips"]
Matter.vue?9a91:136 ["Analogy"]
Matter.vue?9a91:136 (2) ["Ecology", "Humanitarian"]
Matter.vue?9a91:136 ["Media Interaction Design"]
Matter.vue?9a91:136 Glacier
Matter.vue?9a91:136 ["Bugs"]
Matter.vue?9a91:136 ["Design thinking"]
Matter.vue?9a91:136 undefined
Matter.vue?9a91:136 ["nature"]
Matter.vue?9a91:136 (2) ["arduino", "open source"]
Matter.vue?9a91:136 ["Intelligence Collective"]

我做错了什么？

谢谢你的帮助。

我的灵感来自于这个帖子How to filter posts in Vue with components and v-bind:class

Answer 1

filteredMatters: function () {
        if (this.currentFilter === "all") {
          return this.matters;
        }
        return this.matters.filter((matter) => {
          let footprint = []
          for (let obj in matter.footprint) {
            footprint.push(matter.footprint[obj])
          }
          return footprint.some(item => item === this.currentFilter)
        });
      }