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

Posted 2023-02-22

【中文标题】Vuejs计算的API响应过滤器不起作用

【英文标题】：Vuejs computed filter on API response not working

【发布时间】：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'"
      
    />
  </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 我不确定你到底是什么意思

【参考方案1】：

这最终解决了我的问题。