Vue.js博客文章标签过滤器 [英] Vuejs blog post tag filter

问题描述

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

I'm currently building an app with Vue.js and firebase and I'm trying to add a filter by tag functionality to my blog component.

我正在这样做:

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;
          }
        });
      }

这是有效的，但仅适用于存储在我的博客文章标签下的数组的第一个字符串

It's working but only with the first string of the array which is stored under my blog post tag

<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>

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

When I console.log(matter.footprint) I get all arrays from all posts instead of getting the array of the selected post.

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"]

我在做什么错了?

谢谢您的帮助.

我受到此线程的启发推荐答案

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)
        });
      }

这篇关于Vue.js博客文章标签过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！