来自两个不同调用的表的自定义过滤器答案

【问题标题】：Custom filter for table from two different calls来自两个不同调用的表的自定义过滤器
【发布时间】：2023-04-07 11:49:01
【问题描述】：

我目前的情况是我通过 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>

【问题讨论】：

您能否提供一个tableData 结构示例。具体是如何在其中放置类别名称。
所以我的类别下拉列表是从不同的获取 url 调用的，它也有 ID，我必须从那里获取它们。因此，当我再次从下拉列表中选择“名称”时，它仅过滤具有其他值（如 someVal、otherVal 等）的“名称”行。如果所选年份不存在“名称”，则不显示任何内容。 tableData 结构看起来像这样，它还包括类别：{"status":100, "result":[{ "category":"Name", "year":2019, "username":"test", "otherValues": [ { "someVal":30, "otherVal":20 },] } ]}

标签： javascript json object vue.js axios

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

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

【讨论】：