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

【问题标题】：Access array data with index in Vue template在Vue模板中使用索引访问数组数据
【发布时间】：2018-07-30 05:18:36
【问题描述】：

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

我的模板中有以下代码。

&lt;a href="#" class="..."&gt;{{ fixture.flatOdds.data[0].market_id }}&lt;/a&gt;

然后抛出：

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 加载数据。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

问题很可能是在组件生命周期中的某个时刻该值为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。

【讨论】：

【解决方案2】：

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

您可以添加v-if查看是否有数据。

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

【讨论】：