javascript - 来自两个不同调用的表的自定义过滤器

Question

我目前的情况是，我通过 Axios 进行了 2 次 get 调用，并且收到了两个不同的文件。第一个调用是构建表的完整 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() 方法应该能很好地发挥作用。还有一些关于它的更多信息here .

基本上您需要一个新数组来显示所选数据，或者如果未选择任何内容，则显示整个 tableData 数组。这应该是一个计算属性。

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

这是假设当您在数据中初始化 selectedCat 时将其设置为 null。因此，当有人选择一个类别时，它将满足“if”条件，而我们的常量“filtered”将是一个包含所有满足我们条件的“tableData”元素的新数组。如果未选择任何内容，则返回整个 tableData 数组。

当您访问模板中的“tableData”时，假设使用 v-for="data in tableData"，您现在必须使用 v-for="data in filteredTableData”。