Find match in two arrays

问题

Update Got the answer:

if (this.checkedColors.length > 0) {
  straps = straps.filter(strap => {
    return strap.colors.find(color => {
      return this.checkedColors.includes(color.title.toLowerCase());
    });
  });
}

I have two arrays, where I need to return products that match the checkbox value.

I've created a screen recording to display how this works: http://recordit.co/EddLjeqM7i

My code is the following:

export default {
  data() {
    checkedColors: [],
    filterings: [{
        title: "Farver",
        filters: [{
            title: "Grøn",
            value: "grøn"
          },
          {
            title: "Rød",
            value: "rød"
          },
          {
            title: "Gul",
            value: "yellow"
          },
          {
            title: "Lilla",
            value: "lilla"
          },
          {
            title: "Blå",
            value: "blå"
          },
          {
            title: "Grå",
            value: "grå"
          },
          {
            title: "Sort",
            value: "sort"
          },
          {
            title: "Hvid",
            value: "hvid"
          },
          {
            title: "Brun",
            value: "brun"
          }
        ]
      }
    }
  },
    computed: {
filteredStraps() {
  var straps = this.straps;

  if (this.search !== null) {
    var straps = this.searchItems.filter(strap => {
      if (!this.search) return this.searchItems;
      return (
        strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
        strap.type.toLowerCase().includes(this.search.toLowerCase())
      );
    });
  }

  if (this.checkedSkins.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedSkins.includes(strap.skin.toLowerCase());
    });
  }
  if (this.checkedTypes.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedTypes.includes(strap.type.toLowerCase());
    });
  }
  if (this.checkedColors.length > 0) {
    straps = straps.filter(strap => {
      return this.checkedColors.includes(strap.colors.toLowerCase());
    });
  }

  if (this.sort == "newest") {
    return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
  }
  if (this.sort == "priceasc") {
    return straps.sort((a, b) => a.price > b.price);
  }
  if (this.sort == "pricedesc") {
    return straps.sort((a, b) => a.price < b.price);
  } else {
    return straps;
  }
}
  },

<v-expansion-panel class="elevation-0">
  <v-expansion-panel-content v-for="filtering in filterings.slice(0, 1)" :key="filtering.title">
    <div slot="header">{{filtering.title | capitalize}}</div>
    <v-card>
      <v-card-text>
        <v-list>
          <v-list-tile v-for="filter in filtering.filters" :key="filter.value">
            <v-list-tile-content>
              <v-checkbox :value="filter.value" :label="filter.title" v-model="checkedColors" color="primary"></v-checkbox>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-card-text>
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

The straps array is the following: https://i.imgur.com/HIEBgqW.png

I'll need the function to be computed in order to match the other filtering and sorting methods, to return the straps correctly.

I have two other methods that are working, but they didn't require looping through an array to find a match for the value or values I'm looking for.

来源：https://stackoverflow.com/questions/52818032/find-match-in-two-arrays