Tengo un componente con dos funciones definidas en la sección de métodos. Cada uno hace una llamada API para algunos datos JSON.

La segunda función depende de que la primera ya se haya ejecutado (necesito datos de la primera para informar a la segunda). Mi HTML llama a la función uno y la representa. Dentro de ese contenido recién renderizado hay una llamada v-on:click que llama a la segunda función y le pasa un valor que se creó a partir de la primera función.

El código es el siguiente:

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

El error que se esta produciendo cuando disparo la segunda llamada es:

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

Soy nuevo en Vue y no estoy seguro de qué está tratando de corregir este error.