我有一個組件，其中包含在方法部分中定義的兩個函式。每個都對一些 JSON 資料進行 API 呼叫。
第二個函式依賴于已經運行的第一個函式（我需要第一個函式的資料來通知第二個函式）。我的HTML呼叫函式一并呈現它。在新呈現的內容中，有一個v-on:click呼叫，它呼叫第二個函式，并將第一個函式創建的值傳遞給它。
代碼如下：
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));
}
};
當我觸發第二個呼叫時產生的錯誤是：
Property or method "getPlayerData" is not defined on the instance but referenced during render
我是 Vue 的新手，我不確定這個錯誤試圖讓我糾正什么。
uj5u.com熱心網友回復：
您在方法塊之外撰寫了getPlayerData方法，將其移回。
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));
}
},
還資料和方法是像2個分離的塊
data() {
return{};
},
methods:{
},
computed:{
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360496.html
標籤：javascript json Vue.js
上一篇：顯示年初至今