我有一個多物件陣列，我想讓它回圈遍歷一組特定的物件。
到目前為止，這是我的代碼
<template>
<div>
<h1>My Test App</h1>
<button v-on:click="getHockeyData">Get Team Data</button>
<div v-for="hockeyData in hockeyDataList" :key="hockeyData.id" >
<p>{{ hockeyDataList.teams[0].roster.roster[1].person.fullName }}</p>
</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>
我知道回圈在當前狀態下不起作用。我需要增加的回圈中的輸出部分是roster[1]- 我是 Vue 的新手，所以不確定如何使用v-命令來增加 1，直到沒有更多的實體為止。
任何幫助或反饋將不勝感激！
uj5u.com熱心網友回復：
<div v-for="team in hockeyDataList.teams" :key="team.id" >
<p v-for="roster in team.roster.roster :key="roster.id">
{{ roster.person.fullName }}
</p>
</div>
這不是必需的，但如果您愿意，也可以在 v-for 中獲取索引：
<div v-for="(team, index) in hockeyDataList.teams" :key="team.id" >
<p>
{{ hockeyDataList.teams[index].roster.roster[1].person.fullName }}
</p>
</div>
uj5u.com熱心網友回復：
v-for 會自動為您增加索引。問題是 api 回傳一個 json 而不是我們可以迭代的陣列。通過查看 api 回應，我們可以看到團隊是我們可以迭代的陣列。
<v-for="(team, i) in hockeyDataList.teams" :key="i">
其中 index 自動遞增，直到串列末尾。然后我們可以遍歷名冊。
<v-for="(roster, j) in team.roster.roster" :key="j">
把這一切放在一起
<div v-for="(team, i) in hockeyDataList.teams" :key="i">
<div v-for="(roster, j) in team.roster.roster" :key="j">
<p>{{ hockeyDataList.teams[i].roster.roster[j].person.fullName }}</p>
</div>
</div>
uj5u.com熱心網友回復：
只是回圈其他人，你真的想從團隊開始，因為這就是 JSON 的結構方式
使用 JSON 的各個部分的示例，查看其他人的檔案。
<div v-for="team in hockeyDataList.teams" :key="team.id">
<h1>{{ team.name }}</h1>
<div>{{ team.venue.name }}, {{ team.venue.city }}</div>
<div>Created in: {{ team.firstYearOfPlay }}</div>
<div>Division: {{ team.division.name }} - Conference: {{ team.conference.name }}</div>
<h2>Roster</h2>
<div v-for="player in team.roster.roster" :key="team.id '-' player.person.id">
<h3>{{ player.person.fullName }}</h3>
<div>
Number: {{ player.jerseyNumber }} - Position: {{ player.position.name }} {{ player.position.type }}
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357864.html
標籤：javascript 数组 Vue.js