Function within component throwing an error message-CodePudding

I have a component with two functions defined in the methods section. Each make an API call for some JSON data.

The second function is dependent on the first one having already run (I need data from the first to inform the second). My HTML calls function one and renders it. Within that newly rendered content is a v-on:click call that calls the second function, and passes it a value that was created from the first function.

The code is as follows:

HTML

<div v-for="team in hockeyDataList.teams" :key="team.id">

              <!-- Loop through the teams array -->      
              <img :src="`https://www-league.nhlstatic.com/images/logos/teams-current-primary-dark/${team.id}.svg`" class="img-round team-logo"/>
              <h1>{{ team.name }}</h1>
              <div>Division: {{ team.division.name }} <br/> Conference: {{ team.conference.name }}</div>

              <h2>Roster</h2>
              <div class="player-cont">
                  <div v-on:click="getPlayerData(player)" v-for="player in team.roster.roster" :key="team.id   '-'   player.person.id" class="col" :id="player.person.id">
                      <h3>{{ player.person.fullName }}</h3>
                      <img :src="`https://cms.nhl.bamgrid.com/images/headshots/current/168x168/${player.person.id}.jpg`" class="img-round"/>
                      <div>
                      Number: {{ player.jerseyNumber }} | Position: {{ player.position.abbreviation }} 
                      </div>
                  </div>
              </div>
         
   </div>

VUE

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));
    }
  };

The error is being produced when I fire the second call is:

Property or method "getPlayerData" is not defined on the instance but referenced during render

I'm new to Vue and am unsure what this error is trying to get me to correct.

CodePudding user response：

You wrote your getPlayerData method outside of methods block, move it back in.

    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));
  }
},

Also data and methods are 2 separate blocks like

data() {
return{};
},
methods:{
},
computed:{
}