如何过滤Vue数据与多个下拉?

Question

我有一个数据集(数组)，其中包含多个列，如store_id, cat_id, product_id。这些ID对应于其他数据集，如商店、类别和产品，它们都有一个主键'ID'。

:

item.store.id

就是我向Vue发送数据的方式。

到目前为止，我设法把一个工作过滤器的商店使用下拉菜单，它有一个名称，它的值是ID列。

computed: {
filteredDeals() {
if (this.selectedStore != null) {
let tempDeals = this.deals;
tempDeals = tempDeals.filter((item) => {
return item.store.id === this.selectedStore.id;
});
return tempDeals;
} else {
return this.deals;
}
}
},

我一直在努力包装我的头周围(也许这是不可能的)是我怎么能过滤原始数据集使用多个下拉列表?

目前我再次遍历与v代表featuredDeals与一个过滤器工作正常。

Answer 1

因为您的deals数组包含所有store,category和product数据。您可以过滤掉使用&&运营商为多个下拉值数组。在这里，我刚刚创建了一个工作演示:

var vm = new Vue({
el: '#app',
data: {
selectedStore: 1,
selectedCategory: 1,
selectedProduct: 1,
deals: [{
store: {
id: 1,
name: 'Store 1'
},
category: {
id: 1,
name: 'Category 1'
},
product: {
id: 1,
name: 'Product 1'
}
}, {
store: {
id: 2,
name: 'Store 2'
},
category: {
id: 2,
name: 'Category 2'
},
product: {
id: 2,
name: 'Product 2'
}
}, {
store: {
id: 3,
name: 'Store 3'
},
category: {
id: 3,
name: 'Category 3'
},
product: {
id: 3,
name: 'Product 3'
}
}, {
store: {
id: 4,
name: 'Store 4'
},
category: {
id: 4,
name: 'Category 4'
},
product: {
id: 4,
name: 'Product 4'
}
}]
},
methods: {
getDropdownDetails() {
const filteredData = this.deals.filter((item) => {
return item.store.id === this.selectedStore &&
item.category.id === this.selectedCategory &&
item.product.id === this.selectedProduct;
});
console.log(filteredData);
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3>Select Store</h3>
<select v-model="selectedStore">
<option v-for="data in deals" :key="data.store.id" :value="data.store.id"> {{ data.store.name }} </option>
</select>
<h3>Select Category</h3>
<select v-model="selectedCategory">
<option v-for="data in deals" :key="data.category.id" :value="data.category.id"> {{ data.category.name }} </option>
</select>
<h3>Select Product</h3>
<select v-model="selectedProduct">
<option v-for="data in deals" :key="data.product.id" :value="data.product.id"> {{ data.product.name }} </option>
</select><br><br>
<button @click="getDropdownDetails">Submit</button>
</div>

Answer 2

data(){
return {
tempDeals:[{..},{..},......],
selectedStore:null,
selectedCat: null,
selectedProduct: null
}

},
computed: {
filteredDeals(){
let finalFilterItems = [...this.tempDeals]
if(this.selectedProduct){
finalFilterItems =  finalFilterItems.filter((item)=>item.store.id 
=== this.selectedProduct.id)
}
if(this.selectedStore){
finalFilterItems =  finalFilterItems.filter((item)=>item.store.id 
=== this.selectedStore.id)
}
if(this.selectedCat){
finalFilterItems =  finalFilterItems.filter((item)=>item.store.id 
=== this.selectedCat.id)
}

return finalFilterItems
}
}