Пользовательский фильтр для таблицы от двух разных вызовов

Question

Моя текущая ситуация такова, что я делаю 2 звонка через Axios и получаю два разных файла.Первый вызов - это полный json-файл, из которого строится таблица, а второй - только категории (Почему? Сложное приложение сложно. Оно постепенно обновляется со старой платформы).Я создаю два раскрывающихся списка, первый из которых содержит годы, которые также составляют таблицу.Второй выпадающий список заполнен категориями.Когда приложение загружается, таблица загружается за текущий год.

Мой вопрос: как мне создать свой собственный вычисляемый фильтр, который бы фильтровал таблицу и отображал только строки с выбранной категорией (из второго раскрывающегося списка).Поэтому, если я выберу 2019 из первого выпадающего списка, все таблицы будут загружены.И после этого, если я выберу, скажем, «Имя» в выпадающем списке категорий, таблица обновится и покажет только те строки, в которых есть «Имя».Я пробовал разные варианты, но не могу обернуть голову вокруг этого.

Мой текущий код:

data() {
 return {
  year:[],
  category:[] ,
  tableData:[],
 }
},

computed: {
 axiosParams(){
  const params = new URLSearchParams();
  params.append('year', this.year);
  return params;
 },

methods: {
 getYears: function(){  
  axios.get('myUrl', {
    params: this.axiosParams
     }).then((response) => {
    this.year = response.data;
    console.log(response.data)   
    this.tableData = response.data.result;
   })
   .catch((err) => {
    console.log(err);
  });
 },

 getCategory: function(){
   let category = [];
   axios.get('mySecondUrl').then((response, i) => {
    this.category = response.data
    for (var i = 0; i < category.length; i++) {
     let catType = i
     this.catType = response.data[i].name;
     console.log(catType);
    }
  })
  .catch((err) => {
    console.log(err);
  })
 }
}
created: {
 this.getYears();
 this.getCategory();
}

Мой HTML:

<select v-model="selectedYear" @change="yearSelected">
 <option v-for="year in years" :key="year"> {{year}} </option>
</select>

<select v-model="selectedCat" >
 <option v-for="(item, index) in category" :item="item" 
 :key="index" :value="item.name"> {{ item.name }} </option>
</select>

Answer 1

Итак, ваши tableData - это массив таких объектов:

[
  { 
    "category":"Name", 
    "year":2019, 
    "username":"test", 
    "otherValues":[ 
      { 
        "someVal":30, 
        "otherVal":20 
      },
    ] 
  },
]

, и вам необходимо отфильтровать элементы в массиве по названию выбранной категории.К счастью, JavaScript может сделать это довольно легко для нас.Есть несколько методов, которые вы можете использовать для работы с массивами, но в этом случае я думаю, что метод filter() должен работать достаточно хорошо.Здесь есть дополнительная информация здесь .

В основном вам нужен новый массив, который будет отображать выбранные данные или, если ничего не выбрано, показывать весь массив tableData.Это должно быть вычисляемое свойство.

computed: {
  filteredTableData() {
    if (this.selectedCat !== null) {
      const filtered = this.tableData.filter(d => d.category === this.selectedCat)
      return filtered
    }
    return this.tableData
  },
}

Это предполагает, что когда вы инициализируете selectedCat в данных, вы устанавливаете его в ноль.Поэтому, когда кто-то выбирает категорию, он будет удовлетворять условию «если», а наш const «отфильтрованный» будет новым массивом всех элементов «tableData», которые соответствуют нашему условию.Если ничего не выбрано, возвращается весь массив tableData.

Когда вы обращаетесь к 'tableData' в своем шаблоне, предположительно с v-for="data in tableData", вам теперь придется использовать v-for="data in filteredTableData".