Vuejs针对API响应计算的过滤器不起作用

Question

我有一个API响应，我试图通过它运行搜索过滤器，但似乎无法弄清楚我做错了什么。我感觉这是如何返回响应的问题，我尝试解析/字符串化，但是每次都会遇到相同的错误。我收到的错误是：

渲染错误：“ TypeError：this.heroList.filter不是函数”

我的HTML：

<input class="searchbar" placeholder="Search..." type="text" v-model="search" />

<div class="flex-container">
  <div class="flex-item" v-for="(a, index) in filteredHeroList" :key="index">
    <img
      @click="selectedHero(a)"
      class="row full-image"
      :src="'http://cdn.dota2.com/apps/dota2/images/heroes/' + a.shortName + '_full.png'"
      alt="People"
    />
  </div>
</div>

数据：

data() {
 return {
  search: "",
  heroList: [],
};

}，

我的Axios请求：

getHeroes() {
  axios
    .get(`https://api.stratz.com/api/v1/Hero`)
    .then(response => {
      this.heroList = response.data;
      console.log(response.data);
    })
    .catch(err => {
      console.log(err);
    });
},

我正在尝试过滤的响应：

{
  "id": 1,
  "name": "npc_dota_hero_antimage",
  "displayName": "Anti-Mage",
  "shortName": "antimage",
  "abilities": [
    {
      "slot": 1,
      "abilityId": 5003
    },
    {
      "slot": 2,
      "abilityId": 5004
    }
  ],
  "roles": [
    {
      "roleId": 0,
      "level": 3
    },
    {
      "roleId": 1,
      "level": 3
    }
  ],
  "talents": [
    {
      "slot": 0,
      "gameVersionId": 131,
      "abilityId": 6137
    },
    {
      "slot": 1,
      "gameVersionId": 131,
      "abilityId": 6119
    }
  ],
  "stat": {
    "gameVersionId": 131,
    "enabled": true,
    "heroUnlockOrder": 1,
    "team": true,
    "cmEnabled": true,
    "newPlayerEnabled": true,
    "attackType": "Melee",
    "startingArmor": 2.36,
    "startingMagicArmor": 25,
    "startingDamageMin": 29,
    "startingDamageMax": 33,
    "attackRate": 1.4,
    "attackAnimationPoint": 0.3,
    "attackAcquisitionRange": 600,
    "attackRange": 150,
    "primaryAttribute": "agi",
    "heroPrimaryAttribute": 1,
    "strengthBase": 23,
    "strengthGain": 1.3,
    "intelligenceBase": 12,
    "intelligenceGain": 1.8,
    "agilityBase": 24,
    "agilityGain": 3,
    "hpRegen": 0.25,
    "mpRegen": 0,
    "moveSpeed": 310,
    "moveTurnRate": 0.5,
    "hpBarOffset": 0,
    "visionDaytimeRange": 1800,
    "visionNighttimeRange": 800,
    "complexity": 1
  },
  "language": {
    "heroId": 1,
    "gameVersionId": 131,
    "languageId": 0,
    "displayName": "Anti-Mage",
    "bio": "random bio string",
    "hype": "random hype string"
  },
  "aliases": [
    "am"
  ]
}

我的计算过滤器：

computed: {
filteredHeroList() {
  return this.heroList.filter(hero => {
    return (
      hero.shortname
        .toLowerCase()
        .includes(this.search.toLowerCase()));
  });
}

Answer 1

这最终解决了我的问题。