In my Vue component, I have successfully displayed results from a data object and created multiple multiselect boxes. However, I am facing challenges with filtering.
I understand how to set and compare a single value from the multiselect for displaying specific results using v-if in an HTML div. But when it comes to filtering based on multiple Multiselects (especially those with multiple options stored in arrays), I am unsure of how to proceed.
Below is my code snippet. How can I implement proper filtering based on all values in the corresponding v-models for the multiselects? Also, how can I ensure that if "All stores" or "All areas" are selected, all values for that selection should be allowed?
-- Essentially, if the user doesn't make a selection and leaves the multiselect at the placeholder, all values for that select should still be allowed to show in the DOM (considering other filters applied first).
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: 6, name: "auto"},
],
outputOptions: [
{id:1, name: "Sold"},
{id:2, name: "Purchased"}
],
areas: [
{value: 1, name: "East"},
{value: 4, name: "West"},
],
stores: [
{value: 3, name: "One"},
{value: 5, name: "Two"}
],
workNumbers: [
// employee data here
]
},
});<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 components here -->
</div>
<table>
<tbody>
// Table content based on filters
</tbody>
</table>
</div>UPDATE: