VueJS Как фильтровать данные массива при использовании выпадающего списка

Question

В моем vue -app у меня есть массив объявлений о вакансиях, которые имеют разные состояния, такие как "активный", "отклонен", "черновик", "не_активен" и т.д. c. Теперь у меня есть TabMenu: все вакансии, черновики и которые будут утверждены. У каждого из этих MenuTabs есть свое выпадающее меню, где вы должны фильтровать рабочие места. Я понял, что эта функция более сложная, чем ожидалось, или, может быть, я потратил слишком много времени на решение проблем, но по какой-то причине мне не удается показать «все» для отдельного MenuTab. Например, когда я нажимаю на «Меню, которое будет утверждено», я хочу увидеть все рабочие места со статусами «Не одобрено» и «Отклонено» (см. Данные ниже в коде).

Итак мой вопрос, как решить это правильно? Должен ли объект данных для размещения работы также иметь категорию?

Любая помощь приветствуется!

Итак, вот мой компонент:

<template>
  <div>
    <div class="tabs">
      <ul>
        <li v-for="(tab, index) in menuTabs” :key="tab.id" :class="{ 'active': activeTab === index  }"
        @click="toggleList(tab, index)” >
         <span>{{tab.label}}</span>
       </li>
     </ul>
   </div>

   <div class="dropdown has-prepend col-8" :class="{ active: isOpen }">
     <div :class="{ active: isOpen }" class="dropdown-select" @click="toggle">
        {{ selectedOption }}
       <i class="icon-chevron_down" />
     </div>
     <div class="dropdown-options" v-show="isOpen">
       <div class="option" v-for="tab in dropDownTabs" @click="select(tab)" :key="tab.id">
         <span>{{ tab.status }}</span>
       </div>
    </div>
  </div>

  <div class="block">
    <DataTable :data="filteredData" :columns="tableColumns" :filter="search" />
  </div>
 </div>
</template>

import DataTable from '../../snippets/DataTable';

export default {
  components: { DataTable },
  data() {
    return {
      isOpen: false,
      search: "",
      tableData: [
      {
        id: 1,
        title: "Salesperson",
        publish_date: "2019-07-10",
        status: "active",
        applicants: 23,
        expiration_date: "2020-02-21"
      },
      {
        id: 2,
        title: "Developer",
        publish_date: "2019-11-12",
        status: "not_active",
        applicants: 111,
        expiration_date: "2020-02-21"
      },
      {
        id: 3,
        title: "Freelanceer",
        publish_date: "2019-06-10",
        status: "need_approval",
        applicants: 222,
        expiration_date: "2020-01-10"
      },
      {
        id: 4,
        title: "Construction worker",
        publish_date: "2019-12-06",
        status: "active",
        applicants: 76,
        expiration_date: "2020-03-15"
      },
      {
        id: 5,
        title: "IT support”
        publish_date: "2019-11-20",
        status: "draft",
        applicants: 103,
        expiration_date: "2020-04-31"
      },
    ],
    menuTabs: [
     {
       label: "All jobs",
       options: [
       {
         status: "all",
       },
       {
        status: "active",
       },
       {
        status: "not_active"
       }
     ]
    },
    {
      label: "Drafts",
      options: [
      {
        status: "all"
      },
      {
        status: "draft"
      }
     ]
   },
   {
     label: "To Be Approved",
     options: [
     {
       status: "all",
     },
     {
       status: "need_approval",
     },
     {
       status: "rejected"
     }
     ]
   },
  ],
  dropDownTabs: [],
  selectedOption: "",
  selectedTabCategory: "",
  category: "",
  activeTab: "",
  tableColumns: [
    "id",
    "title",
    "publish_date",
    "status",
    "applicants",
    "expiration_date"
  ]
 }
},
computed: {
  filteredData() {
    let status = this.selectedOption;

    let category = this.category;

    let filtered = this.tableData.filter(data => {
    if (status == "all") {
      return data;
    }
    return data.status === status;
  });
  return filtered;
 }
},
methods: {
  toggleList(tab, index) {
    this.category = tab.options[0].category;
    this.selectedTabCategory = tab;
    let currentTabOptions = this.selectedTabCategory.options;

    this.clearDropDown();
    this.selectedOption = currentTabOptions[0].status;

    currentTabOptions.forEach(option => {
      this.dropDownTabs.push(option);
    });

    this.activeTab = index;
  },
  toggle() {
    this.isOpen = !this.isOpen;
  },
  select(tab) {
    this.selectedOption = tab.status;

    let category = tab.category;

    let filtered = this.tableData.filter(data => {
      return data.status === this.selectedOption;
    });

    this.isOpen = false;

    return filtered;
  },
  clearDropDown() {
     this.dropDownTabs = [];
  }
},
created() {},
mounted() {
  this.selectedOption = this.menuTabs[0].options[0].status;
  this.selectedTabCategory = this.menuTabs[0].label;
  this.category = this.menuTabs[0].options[0].category;
  let defaultOptions = this.menuTabs[0].options;
  defaultOptions.forEach(option => {
    this.dropDownTabs.push(option);
  });
  this.activeTab = 0;
 }
};

Answer 1

Я не уверен, поможет ли это вам вообще. Однако я все равно попробую.

Вы должны сохранить выбранную вкладку при нажатии на нее. Затем отфильтруйте this.tableData на основе выбранной вкладки options. Также вам потребуется сопоставить опцию вкладки options с массивом строк, чтобы вы могли проверить, есть ли там статус публикации.

methods: {
  toggleList (tab, index) {
    this.selectedTabObject = tab
    // rest of your code...
  }
},
computed: {
  filteredData () {
    return this.tableData.filter(data => {
      const states = this.selectedTabObject.options.map(opt => opt.status)
      return states.includes(data.status)
    })
  }
}

Также я создал простую скрипку, чтобы mimi c вашу проблему , https://jsfiddle.net/3hqnp7u2/7/