Tengo un componente vue donde actualmente estoy mostrando con éxito los resultados de un objeto de datos, y también he creado con éxito varios cuadros de selección múltiple. Mi problema es el filtrado.
Sé cómo puedo establecer un valor único de la selección múltiple y compararlo (usando v-if) para mostrar ciertos resultados en un div HTML, pero ahora estoy completamente perdido sobre cómo hacer un filtrado adecuado basado en múltiples selecciones múltiples ( especialmente porque varios de ellos permiten múltiples opciones que almacenan los valores en matrices)
Estoy poniendo mi fragmento a continuación, pero ¿cómo puedo hacerlo correctamente para poder filtrar los resultados en función de todos los valores en los modelos v correspondientes para las selecciones múltiples, mientras me aseguro de que si "Todas las tiendas" o "Todas las áreas" es seleccionado, permite todos los valores para esa selección?
-- En otras palabras, si el usuario no hace una selección y la selección múltiple se deja en el marcador de posición, todos los valores para esa selección podrán mostrarse en el DOM (basado primero en otros filtros)
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>ACTUALIZAR:
Ahora me he movido a otra tabla que es similar pero está recorriendo diferentes objetos para crear un modelo diferente que también se pasa a través de una función para un modal.
<tbody v-if="selectedOutput.name === 'Cubes'"> <tr v-for="(value, employee) in workNumbers" :key="employee"> <td v-for="date in dates" :key="date" > <div v-for="(dateSpecificData, dateValue) in value.dates" :key="dateValue" @click="showModal(dateSpecificData)" :style="'background: ' + (dateSpecificData.unavailable > 0 ? '#f7a7a3' : '#a8f0c6')"> <div v-if="dateValue == date "> @{{dateSpecificData.sold}} </div> </div> </td> </tr> </tbody>Puede definir una computed-property que devuelva la lista filtrada de acuerdo con los parámetros:
new Vue({ el: "#app", components: { Multiselect: window.VueMultiselect.default }, data: () => ({ selectedOutput: '', outputOptions: [ {id:1, name: "Sold"}, {id:2, name: "Purchased"} ], selectedShifts: [], shifts: [ {id: 1, name: "First"}, {id: 2, name: "Second"} ], selectedCategories: [], categories: [ {id: 1, name: "electronics"}, {id: 2, name: "home"}, {id: 3, name: "auto"} ], selectedAreas:[], areas: [ {value: 1, name: "East"}, {value: 1, name: "West"} ], selectedStores: [], 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": "home", "area" : "West", "store": "Two", "sold": 225, "purchased": 77 }, "Suzie": { "name": "Suzie", "title": "Manager", "shift": "Second", "category": "electronics", "area" : "East", "store": "One", "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": "auto", "area" : "West", "store": "Two", "sold": 55, "purchased": 2 } } ] }), methods: { filtedSelectedHelper(arr = [], val) { return arr.length ? arr.some(({ name }) => name === val) : true; } }, computed: { filteredWorkNumbers () { const ouput = this.selectedOutput; const filteredList = this.workNumbers .flatMap(Object.values) .filter(({ shift, category, area, store }) => this.filtedSelectedHelper(this.selectedShifts, shift) && this.filtedSelectedHelper(this.selectedCategories, category) && this.filtedSelectedHelper(this.selectedAreas, area) && this.filtedSelectedHelper(this.selectedStores, store) ); return !this.selectedOutput ? filteredList.map(({ name, sold, purchased }) => `${name} - ${sold} - ${purchased}` ) : this.selectedOutput.name === "Sold" ? filteredList.map(({ name, sold }) => `${name} - ${sold}` ) : filteredList.map(({ name, purchased }) => `${name} - ${purchased}` ) } } }); <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <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" ></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> <tr v-for="str in filteredWorkNumbers" :key="str"><td>{{str}}</td></tr> </tbody> </table> </div>Recursos:
https://vuejs.org/v2/guide/computed.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map