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

Question

我在使用索引访问数组中的数据时遇到问题。

我的模板中有以下代码。

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

这会抛出:

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

但是已经定义了fixture.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

最有可能的问题是该值在组件生命周期的某个时刻未定义(您可能正在异步加载它)。您在引用您的属性(property)时需要采取防御措施。

您可以使用计算属性

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，但请注意对象的哪一部分未定义。