更新 得到答案:
if (this.checkedColors.length > 0) {
straps = straps.filter(strap => {
return strap.colors.find(color => {
return this.checkedColors.includes(color.title.toLowerCase());
});
});
}
我有两个数组,需要返回与复选框值匹配的产品。
我创建了一个屏幕录像以显示其工作原理:http://recordit.co/EddLjeqM7i
我的代码如下:
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>
straps数组如下:https://i.imgur.com/HIEBgqW.png
我需要计算函数以匹配其他过滤和排序方法,以正确返回表带。
我还有另外两种有效的方法,但是它们不需要遍历数组即可找到与我要查找的值匹配的值。