Vuejs计算的API响应过滤器不起作用答案

【问题标题】：Vuejs computed filter on API response not workingVuejs计算的API响应过滤器不起作用
【发布时间】：2020-09-06 06:44:40
【问题描述】：

我有一个 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()));
  });
}

【问题讨论】：

因此，由于某种原因，我的 heroList 以对象而不是数组的形式返回。知道为什么吗？
看看你的 "this".heroList "this" 是 vue 还是其他的
@Mars.Tsai 我不确定你到底是什么意思

标签： json vue.js search filter computed-properties

【解决方案1】：

这最终解决了我的问题。

【讨论】：