在 Vue 中过滤 json 响应

Question

我在过滤 Vue 中的 json 响应时遇到问题。

return this.offers.filter(type => type.offers == 'Junior');

每当我将其保留为 return this.offers 时，都会在我的 html 中显示：

{"-MN5agCddYAdy7c8GSSz": { "companyName": "dawdwad", "image": "da", "jobDescription": "dada", "location": "daw", "salary": "dadaw", "skill": "dawda", "tags": "dada", "title": "dwa" }, "-MN7vsTsNohgQigd3S26": { "companyName": "ejadfjaq", "image": "", "jobDescription": "dada", "location": "2sjawdja", "salary": "40324032", "skill": "Junior", "tags": "ux", "title": "fawd" } }

但我只想显示带有"skill": "Junior" 的字段。

Answer 1

您的 JSON 是一个对象，但 filter 仅适用于数组。您可以在计算中使用for...in 循环来重新格式化它并按照您喜欢的方式对其进行过滤：

computed: {
  filteredOffers() {
    const filteredOffers = [];
    for(const key in this.offers) {
      if (this.offers[key].skill == 'Junior') filteredOffers.push(this.offers[key]);
    }
    return filteredOffers;
  }
}

这将返回您想要的对象数组。如果您只想在模板中显示它们：

<div id="app">
   {{ filteredOffers }}
</div>

这是一个演示：

new Vue({
  el: "#app",
  data() {
    return {
      offers: {
        "-MN5agCddYAdy7c8GSSz": {
          "companyName":"dawdwad",
          "image":"da",
          "jobDescription":"dada",
          "location":"daw",
          "salary":"dadaw",
          "skill":"dawda",
          "tags":"dada",
          "title":"dwa"
        },
        "-MN7vsTsNohgQigd3S26":{
          "companyName":"ejadfjaq",
          "image":"",
          "jobDescription":"dada",
          "location":"2sjawdja",
          "salary":"40324032",
          "skill":"Junior",
          "tags":"ux",
          "title":"fawd"
        }
      }
    }
  },
  computed: {
    filteredOffers() {
      const filteredOffers = [];
      for(const key in this.offers) {
        if (this.offers[key].skill == 'Junior') filteredOffers.push(this.offers[key]);
      }
      return filteredOffers;
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   {{ filteredOffers }}
</div>