Vue组件调用方法报错：getPlayerData未定义 该如何修复？

问题根因 #

代码存在两处Vue实例配置的结构错误，导致getPlayerData未被正确注册到实例上：

• data()的返回对象缺少闭合}，结构不完整
• getPlayerData方法定义在methods配置对象外部，模板渲染时无法访问该方法

修正后的Vue代码 #

export default {
  data() {
    return {
      hockeyDataList: [],
      playerDataList: []
    }
  },
  methods: {
    getHockeyData(teams) {      
      axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams.id}?expand=team.roster`)
        .then(response => this.hockeyDataList = response.data)
    },
    getPlayerData(player) {
      axios.get(`https://statsapi.web.nhl.com/api/v1/people/${player.person.id}/stats?stats=yearByYear`)
        .then(response => this.playerDataList = response.data)
    }
  }
}

补充说明 #

所有需要在模板中调用的方法，都必须放在methods配置对象内部。编写嵌套结构时注意校验每个对象、方法的闭合范围，避免出现语法层面的结构错误。

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