Question

我无法使用索引从数组访问数据。

我的模板中包含以下代码。

<a href="#" class="...">{{ fixture.flatOdds.data[0].market_id }}</a>

然后抛出：

TypeError: fixture.flatOdds.data[0] is undefined

但是定义了fix.flatOdds.data [0]。当我像这样打印出Fixture.flatOdds.data [0]时：

<a href="#" class="...">{{ fixture.flatOdds.data[0] }}</a>

它可以很好地打印出对象。响应，

{ "bookmaker_id": 2, "bookmaker_event_id": null, "market_id": 1, "odds": [ { "label": "1", "value": 3, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } }, { "label": "X", "value": 3.2, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } }, { "label": "2", "value": 2.38, "winning": null, "handicap": null, "total": null, "last_update": { "date": "2018-07-29 08:15:53.000000", "timezone_type": 3, "timezone": "UTC" } } ] }

我在做什么错了？

注意：我正在使用axios从API加载数据。

Answer 1

您是否异步加载数据？未加载数据时，fixture.flatOdds.data[0]可能不可用。

您可以添加v-if来检查数据是否可用。

   <a href="#" class="..." 
     v-if="fixture.flatOdds.data[0]">
     {{ fixture.flatOdds.data[0].market_id }}
   </a>

Answer 2

问题很可能是组件生命周期中某个时刻的值为undefined（您可能正在异步加载它）。您需要以引用财产的方式进行防御。

您可以使用计算所得的属性

const component = {
  computed: {
    marketId () {
      if (this.fixture && this.fixture.flatOdds && this.fixture.flatOdds.data) {
        return fixture.flatOdds.data[0].market_id
      }
      return 'unknown'
    }
  }
}

或者您也可以使用过滤器

<template>
  <span>{{fixture | getMarketId}}</span>
</template>

<script>
export default {
  filter: {
    getMarketId (obj) {
      if (obj && obj.flatOdds && obj.flatOdds.data) {
        return obj.flatOdds.data[0].market_id
      }
      return 'unknown'
    }
  }
}
</script>

或者按照@ittus的示例，使用v-if，但要注意对象的哪一部分是undefined。

在Vue模板中使用索引访问数组数据

2 个答案: