Find match in two arrays - arrays

Question

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.