I have a data set (array) which contains multiple columns such as store_id, cat_id, product_id. These ID's correspond to other data sets such as store, category, and product which all have a primary key of 'ID'.

The:

item.store.id

is just the way I am sending the data to Vue.

So far I managed to put together a working filter for stores using a dropdown which has a name and it's value is the ID column.

 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;
            }
        }
    },

What I've been struggling to wrap my head around (and perhaps it's not possible) is how can I filter the original data set using multiple dropdowns?

Currently I loop over featuredDeals with v-for which again works correctly with that one filter.

CodePudding user response：

  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
      }
    }

CodePudding user response：

As your deals array contains all the store, category and product data. You can filtered out the array by using && operator for multiple dropdown values. Here, I just created a working demo :

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>