Vue中如何实现循环时自动递增索引遍历指定对象数组元素

问题核心原因 #

你当前的代码有两个核心问题：

• 你调用的接口返回的response.data是对象而非数组，你给hockeyDataList赋值后用v-for遍历对象本身不符合你的需求
• 你写死了roster[1]索引，没有遍历队员列表数组，也就是hockeyDataList.teams[0].roster.roster这个存储所有队员信息的数组

修改后可运行的代码 #

<template>
  <div>
    <h1>My Test App</h1>
    <button v-on:click="getHockeyData">Get Team Data</button>
    <!-- 先判断数据是否加载完成，避免初始化时报错 -->
    <div v-if="hockeyDataList.teams">
      <!-- 直接遍历队员数组，v-for 会自动遍历所有元素直到结束 -->
      <div v-for="player in hockeyDataList.teams[0].roster.roster" :key="player.person.id">
        <p>{{ player.person.fullName }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Weather",
  data() {
    return {
      hockeyDataList: {} // 这里改成对象，因为接口返回的是对象不是数组
    };
  },
  methods: {
   getHockeyData() {
      axios.get("https://statsapi.web.nhl.com/api/v1/teams/21?expand=team.roster").then(response => (this.hockeyDataList = response.data));
    }
  }
};
</script>

关键修改说明 #

• 把hockeyDataList的初始值从空数组改成空对象，匹配接口返回的数据结构
• 新增v-if="hockeyDataList.teams"判断，避免数据还没加载完成时读取深层属性报错
• 直接对队员数组hockeyDataList.teams[0].roster.roster使用v-for遍历，Vue会自动遍历数组所有元素，不需要你手动维护索引递增，每个遍历项player就对应数组里的单个队员信息，直接读取对应属性即可

内容的提问来源于stack exchange，提问作者user4759415