VueJS 中的数组过滤器

Question

当我打开一个子下拉组件并选择一个值时，它的“标签”作为数组传递回父级。这一切都很好，我得到了这些。

然后我想获取这些标签并将它们与名为 Results 的数组进行比较。我猜这工作正常，但说它会检查结果数组中名为“wedding”、“dining”、“spa”的标签，它将转到 Results 数组，如果第一个是“wedding”，它会将 active 设置为 true，但随后下一个可能是“gym”，它不匹配，因此 active 为 false。

希望我已经很好地解释了我的困境。任何帮助将不胜感激。

<template>
  <div>
    <div class="profiler">
      <div class="in">
        <div class="profiler__heading">
          <div class="profiler__heading--icon">
            <img src="/static/img/svg/profiler-white.svg" />
          </div>
          <div class="profiler__heading--title">
            <h6 class="heading heading--uppercase">TELL US ABOUT YOU AND LET US PERSONALISE YOUR EXPERIENCE</h6>
          </div>
        </div>
        <div class="profiler__form">
          <div class="profiler__form--row">
            <span>I'm visiting Conrad Algarve for a </span>
            <dropdown @menu-tags="menuTags" v-bind:dropdown="visiting"></dropdown>
          </div>
          <div class="profiler__form--row">
            <span>I'm interested in</span>
            <!-- Pass down to child a custom event listener called is-menu-visible and assign 
               to a function called isMenuVisible (See dropdown.vue) -->
            <dropdown v-bind:dropdown="interestedOne"></dropdown>
            <span>and</span>
            <dropdown v-bind:dropdown="interestedTwo"></dropdown>
          </div>
        </div>
        <div class="profiler__options">
          <div class="profiler__options--filter">
            <a href="#">SHOW MY EXPERIENCES</a>
          </div>
          <div class="profiler__options--hide">
            <a href="#">SKIP. I’D RATHER LOOK AROUND</a>
          </div>
        </div>
      </div>
    </div>
    <div class="profilerResults">
      <div class="box" v-for="result in results" v-if="result.active">{{ result.title }} {{ result.tags }}</div>
    </div>
  </div>
</template>

<script>
  import Dropdown from './ui/Dropdown'
  export default {
    name: "Profiler",
    components: {
      'dropdown': Dropdown
    },

    data() {
      return {
        currentTags: [],
        activeTags: [],
        visiting: [{
            title: 'Wedding/Vacation',
            tags: [
              'weddings',
              'dining',
              'spafitness'
            ]
          },
          {
            title: 'Holiday',
            tags: [
              'dining',
              'spanfitness',
              'experiences',
              'poolbeach',
              'whatson'
            ]
          },
          {
            title: 'Special Occasion',
            tags: [
              'weddings',
              'dining',
              'spafitness',
              'golf',
              'whatson',
              'experiences'
            ]
          },
          {
            title: 'Business Trip',
            tags: [
              'meetingsevents',
              'golf'
            ]
          }
        ],
        interestedOne: [{
            title: 'What\s On',
          },
          {
            title: 'Family Fun',
          },
          {
            title: 'Relaxing',
          },
          {
            title: 'Exploring',
          },
          {
            title: 'Dining',
          },
          {
            title: 'Meetings & Events',
          },
          {
            title: 'Golf',
          }
        ],
        interestedTwo: [{
            title: 'What\s On',
          },
          {
            title: 'Family Fun',
          },
          {
            title: 'Relaxing',
          },
          {
            title: 'Exploring',
          },
          {
            title: 'Dining',
          },
          {
            title: 'Meetings & Events',
          },
          {
            title: 'Golf',
          }
        ],
        results: [{
            title: "Pools & Beach",
            slug: 'poolbeach',
            tags: [
              'relaxing',
              'familyfun',
              'holidayvacation'
            ],
            active: false
          },
          {
            title: "Kids Club & Games Room",
            slug: 'kidsclubgamesroom',
            tags: [
              'familyfun'
            ],
            active: false
          },
          {
            title: "What's On",
            slug: 'whatson',
            tags: [
              'specialoccasion',
              'holidayvacation',
              'dining',
              'whatson'
            ],
            active: false
          },
          {
            title: "Golf",
            slug: 'golf',
            tags: [
              'specialoccasion',
              'business',
              'relaxing',
              'meetingsevents',
              'golf'
            ],
            active: false
          },
          {
            title: "Experiences",
            slug: 'experiences',
            tags: [
              'specialoccasion',
              'holidayvacation',
              'relaxing',
              'dining',
              'whatson'
            ],
            active: false
          },
          {
            title: "Spa & Fitness",
            slug: 'spafitness',
            tags: [
              'specialoccasion',
              'holidayvacation',
              'weddings',
              'whatson',
              'spafitness'
            ],
            active: false
          },
          {
            title: "Weddings",
            slug: 'weddings',
            tags: [
              'specialoccasion',
              'weddings'
            ],
            active: false
          },
          {
            title: "Dining",
            slug: 'dining',
            tags: [
              'specialoccasion',
              'holidayvacation',
              'weddings',
              'dining'
            ],
            active: false
          },
          {
            title: "Meetings & Events",
            slug: 'meetingsevents',
            tags: [
              'business',
              'meetingsevents'
            ],
            active: false
          }
        ]
      }
    },
    watch: {
      currentTags: function () {
        //console.log(this.results);
        //this.results;
      },
    },
    methods: {
      filterCurrent() {
        var self = this;
        // var results = this.results;
        var activeTags = [];

        this.currentTags.tags.filter(function (tag) {
          activeTags.push(tag);

          this.results.filter(function (result) {
            result.tags.some(function (tag) {
              if (tag.indexOf(activeTags) != -1) {
                result.active = true;
              } else {
                result.active = false;
              }
            })
          })

        }, this)
      },
      menuTags(label) {
        this.currentTags = label;
        this.filterCurrent();
      },
    },
  }

</script>

Answer 1

如果我正确理解您的问题，您想选择与当前标签有一个或多个标签的所有结果吗？

与其更改结果中的active 标志，不如根据您的条件过滤结果？

this.activeResults = this.results.filter( function(result) {
    return result.tags.some(function(tag) {
        return tag.indexOf(activeTags) != -1;
    });
});

然后只渲染activeResults 而不是results。