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

我目前的情况是我通过Axios拨打了2个电话，并且收到了两个不同的文件。第一次调用是构建表的完整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>

最佳答案

因此，您的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'条件，而我们的const'filtered'将是一个满足我们条件的所有'tableData'元素的新数组。如果未选择任何内容，则返回整个tableData数组。

当您在模板中访问'tableData'时（大概使用v-for="data in tableData"），您现在必须使用v-for="data in filteredTableData"。