Vue, muestra todos los resultados cuando las selecciones múltiples están vacías (sin filtros en su lugar significa que se muestran todos los resultados)

0

Tengo una aplicación vue en la que simplemente agrego filtros (usando vue-multiselects) para filtrar valores en una tabla html.

Funciona perfectamente para mí, en cuanto a mostrar los resultados correctos cuando agrego filtros en los menús desplegables. Sin embargo, si no tengo nada seleccionado, no se muestra nada (como se esperaba)

Me gustaría hacerlo de modo que si todos los menús desplegables están vacíos (o tal vez todos mis arreglos para los valores del menú desplegable están vacíos: shiftArray, areaArray, etc.), entonces se mostrarán todos los resultados. Básicamente, no hay filtros significa mostrar todo.

Entonces, dado que tengo el filtrado funcionando, espero que alguien pueda ayudarme a descubrir la mejor manera de hacer que todo se muestre si no hay filtros en su lugar.

var vm = 
new Vue({
  el: "#app",
  props: { 

  },
  components: {Multiselect: window.VueMultiselect.default},
  data: {
    selectedOutput: '',
    selectedarea:[],
    selectedStores: [],
    selectedShift: [],
    selectedCategory: [],
    CategoryArray:[],
    ShiftArray: [],
    areaArray: [],
    StoreArray: [],
    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"}
    ],
    dates: [ "2021-10-02", "2021-10-03", "2021-10-04"] ,
    workNumbers: [
        {
          "Adam": {
            "2021-10-02": {
              "name": "Adam",
              "title": "Manager",
              "shift": "First",
              "category": "electronics",
              "area" : "East",
              "store": "One",
              "sold": 140,
              "purchased": 15,
              "station": 42,
              "date": "2021-10-02"
            }
          },
          "Ben": {
            "2021-10-02": {
              "name": "Ben",
              "title": "Manager",
              "shift": "First",
              "category": "electronics",
              "area" : "East",
              "store": "One",
              "sold": 225,
              "purchased": 77,
              "station": 42,
              "date": "2021-10-02"
            }
          },
          "Suzie": {
            "2021-10-02": {
              "name": "Suzie",
              "title": "Manager",
              "shift": "Second",
              "category": "home",
              "area" : "West",
              "store": "Two",
              "sold": 124,
              "purchased": 55,
              "station": 42,
              "date": "2021-10-02"
            }
          },
          "Reg": {
            "2021-10-02": {
              "name": "Reg",
              "title": "Manager",
              "shift": "Second",
              "category": "home",
              "area" : "West",
              "store": "Two",
              "sold": 66,
              "purchased": 36,
              "station": 42,
              "date": "2021-10-02"
            }
          },
          "Kelly": {
            "2021-10-02": {
              "name": "Kelly",
              "title": "Manager",
              "shift": "Second",
              "category": "home",
              "area" : "West",
              "store": "Two",
              "sold": 55,
              "purchased": 2,
              "station": 42,
              "date": "2021-10-02"
            }
          },
        }
    ]
  },
  methods: {

    addShiftSelection(){
      console.log(this.selectedShift);
      this.selectedShift.forEach(fields => {
        if(this.ShiftArray.indexOf(fields.id) !== -1){
          console.log("This exists")
        }else{
          this.ShiftArray.push(fields.name);
        }
      });
      console.log(this.ShiftArray);
    },
    addareaSelection(){
      console.log(this.selectedarea);
      this.selectedarea.forEach(fields => {
        if(this.areaArray.indexOf(fields.name) !== -1){
          console.log("This exists")
        }else{
          this.areaArray.push(fields.name);
        }
      });
      console.log(this.areaArray);
    },
    addStoreSelection(){
      console.log(this.selectedStores);
      this.selectedStores.forEach(fields => {
        if(this.StoreArray.indexOf(fields.name) !== -1){
          console.log("This exists")
        }else{
          this.StoreArray.push(fields.name);
        }
      });
      console.log(this.StoreArray);
    },
    addCategorySelection(){
      console.log(this.selectedCategory);

      this.selectedCategory.forEach(fields => {
        if(this.CategoryArray.indexOf(fields.name) !== -1){
          console.log("This exists")
        }else{
          this.CategoryArray.push(fields.name);
        }
      });
      console.log(this.CategoryArray);
    },
    removeCategorySelection(value){
       const removeIndex = this.CategoryArray.findIndex(category => category === value.name)
       if (removeIndex === -1) return // means item not found
       this.CategoryArray.splice(removeIndex, 1)
    },
    removeShiftSelection(value){
       const removeIndex = this.ShiftArray.findIndex(shift => shift === value.name)
       if (removeIndex === -1) return // means item not found
       this.ShiftArray.splice(removeIndex, 1)
    },
    removeareaSelection(value){
       const removeIndex = this.areaArray.findIndex(area => area === value.name)
       if (removeIndex === -1) return // means item not found
       this.areaArray.splice(removeIndex, 1)
    },
    removeStoreSelection(value){
       const removeIndex = this.StoreArray.findIndex(store => store === value.name)
       if (removeIndex === -1) return // means item not found
       this.StoreArray.splice(removeIndex, 1)
    },
  },
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">


<div id="app">

<div class="uk-width-2-10" style="position: relative !important;">
    <!-- <label for="output">Cubes/Pieces:</label> -->
    <multiselect
      v-model="selectedOutput"
      :options="outputOptions"
      :multiple="false"
      :close-on-select="true"
      label="name"
      track-by="name"
      :selected="Sold"
    ></multiselect>
</div>
<div class="uk-width-2-10" style="position:relative;">
    <multiselect
      v-model="selectedShift"
      :options="shifts"
      :multiple="true"
      :close-on-select="true"
      placeholder="All Shifts"
      label="name"
      track-by="name"
      @input="addShiftSelection"
      @remove="removeShiftSelection"
    ></multiselect>
</div>
<div class="uk-width-2-10" style="position: relative !important;">
    <multiselect
      v-model="selectedarea"
      :options="areas"
      :multiple="true"
      :close-on-select="true"
      placeholder="All Areas"
      label="name"
      track-by="id"
      @input="addareaSelection"
      @remove="removeareaSelection"
    ></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="name"
      @input="addStoreSelection"
      @remove="removeStoreSelection"
    ></multiselect>
</div>
<div class="uk-width-2-10" style="position: relative !important;">
    <multiselect
      v-model="selectedCategory"
      :options="categories"
      :multiple="true"
      :close-on-select="true"
      placeholder="All Categories"
      label="name"
      track-by="name"
      @input="addCategorySelection"
      @remove="removeCategorySelection"
    ></multiselect>
</div>


<table>
<tbody>
 <tr v-for="(value, employee) in workNumbers" :key="employee">
  <!-- Value will be dates object-->
  <td v-for="date in dates" :key="date" >
    <div v-for="(dateSpecificData, dateValue) in value.dates" :key="dateValue">
      <div v-if="dateValue == date ">
        @{{dateSpecificData.sold}}
      </div>
    </div>
  </td>
</tr>
</tbody>
</table>

</div>
2
  • v3.vuejs.org/guide/… Agregaría un a la plantilla un <v-else> que se muestra cuando no se seleccionan filtros.
    Strella
    14 de oct a las 0:44
  • Su fragmento de código no representa realmente la tabla. Y se refiere a una variable indefinida. ¿Puede actualizarlo para mostrar un ejemplo funcional?
    tony19
    14 de oct a las 3:53