Vue multiselect, how to filter with multiple select boxes

I have a vue component where I’m currently successfully showing results from a data object, and I’ve also successfully created several multiselect boxes. My issue is filtering.

I know how I can set a single value from the multiselect and compare it (using v-if) in order to show certain results in an HTML div, but I’m completely lost now on how to do proper filtering based on multiple Multiselects (especially since several of them allow multiple options that store the values in arrays)

I’m putting my snippet below, but how can I properly make it so that I can filter results based on all values in the corresponding v-models for the multiselects, while making sure that if “All stores” or “All areas” is selected, it allows all values for that selection?

– In other words, if the user doesn’t ake a selection and the multiselect is left on the placeholder, all values for that select would be allowed to show in the DOM (based on other filters first)


    var vm = 
    new Vue({
      el: "#app",
      components: {Multiselect: window.VueMultiselect.default},
      data: {
        selectedOutput: '',
        selectedAreas:[],
        selectedStores: [],
        selectedCategories: [],
        selectedShifts: [],
        shifts: [
          {id: 1, name: "First"},
          {id: 2, name: "Second"}
        ],
        categories: [
          {id: 1, name: "electronics"},
          {id: 1, name: "home"},
          {id: 1, name: "auto"},
        ],
        outputOptions: [
          {id:1, name: "Sold"},
          {id:2, name: "Purchased"}
        ],
        areas: [
            {value: 1, name: "East"},
            {value: 1, name: "West"},
        ],
        stores: [
            {value: 1, name: "One"},
            {value: 2, name: "Two"}
        ],
        workNumbers: [
            {
              "Adam": {
                "name": "Adam",
                "title": "Manager",
                "shift": "First",
                "category": "electronics",
                "area" : "East",
                "store": "One",
                "sold": 140,
                "purchased": 15
              },
              "Ben": {
                "name": "Ben",
                "title": "Manager",
                "shift": "First",
                "category": "electronics",
                "area" : "East",
                "store": "One",
                "sold": 225,
                "purchased": 77
              },
              "Suzie": {
                "name": "Suzie",
                "title": "Manager",
                "shift": "Second",
                "category": "home",
                "area" : "West",
                "store": "Two",
                "sold": 124,
                "purchased": 55
              },
              "Reg": {
                "name": "Reg",
                "title": "Manager",
                "shift": "Second",
                "category": "home",
                "area" : "West",
                "store": "Two",
                "sold": 66,
                "purchased": 36
              },
              "Kelly": {
                "name": "Kelly",
                "title": "Manager",
                "shift": "Second",
                "category": "home",
                "area" : "West",
                "store": "Two",
                "sold": 55,
                "purchased": 2
              },
            }
        ]
      },
    });



    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-multiselect/3.0.0-alpha.2/vue-multiselect.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vue-multiselect/3.0.0-alpha.2/dist/vue-multiselect.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
    <div class="uk-width-2-10" style="position: relative !important;">
        <multiselect
          v-model="selectedOutput"
          :options="outputOptions"
          :multiple="false"
          :close-on-select="true"
          label="name"
          track-by="name"
          @input="checkOutput"
        ></multiselect>
    </div>
    <div class="uk-width-2-10" style="position:relative;">
        <multiselect
          v-model="selectedShifts"
          :options="shifts"
          :multiple="true"
          :close-on-select="true"
          placeholder="All shifts"
          label="name"
          track-by="name"
        ></multiselect>
    </div>
    <div class="uk-width-2-10" style="position: relative !important;">
        <multiselect
          v-model="selectedCategories"
          :options="categories"
          :multiple="true"
          :close-on-select="true"
          placeholder="All categories"
          label="name"
          track-by="id"
        ></multiselect>
    </div>
    <div class="uk-width-2-10" style="position: relative !important;">
        <multiselect
          v-model="selectedAreas"
          :options="areas"
          :multiple="true"
          :close-on-select="true"
          placeholder="All areas"
          label="name"
          track-by="name"
        ></multiselect>
    </div>
    <div class="uk-width-2-10" style="position: relative !important;">
        <multiselect
          v-model="selectedstores"
          :options="stores"
          :multiple="true"
          :close-on-select="true"
          placeholder="All stores"
          label="name"
          track-by="value"
        ></multiselect>
    </div>

        <table>
        <tbody v-if="selectedOutput.name === 'Sold'">
          <tr v-for="(value, employee) in workNumbers"  :key="employee">
            <!-- this is where I need a condition to show based on filters, I believe-->
            <td>@{{name}} - @{{sold}}</td>
          </tr>
        </tbody>
        <tbody v-else-if="selectedOutput.name === 'Purchased'">
          <tr v-for="(value, employee) in workNumbers"  :key="employee">
            <!-- this is where I need a condition to show based on filters, I believe-->
            <td>@{{name}} - @{{purchased}}</td>
          </tr>
        </tbody>
        </table>
    </div>

Use a computed property to create a derived dataset based on the filters applied.

For a pretty basic example, have a look at this grid component which filters by search and has a sort order: vue-20-grid-component - CodeSandbox