私はそのような2つのv-forループを持っています：
<div v-for="id in ids">
<div v-for="data in getData(id)">
<p>{{data.name}}</p>
</div>
</div>
1つ目v-forは、内に格納されてdata()いるIDの配列を反復処理します。2番目v-forに、関数によって返される結果を繰り返し処理しますgetData()。
axios呼び出しは、IDごとの名前を含む結果の配列を返しますが、<p>タグは名前を表示しません。
<script>
data(){
id: ['1', '2', '3']
},
methods:{
getData(id){
//axios call
return response.data;
}
}
</script>
これが問題だと思います：
v-forがメソッドを呼び出すと、axios呼び出しが解決されるのを待たず、すぐに反復できる配列がないため、何も表示できません（表示するものがありません）。 axios呼び出しが解決した場合、v-forが通知を受け取り、テンプレートを更新する方法はありません。したがって、状況は次のようになります。
だからここにあなたができることがあります：
正常に動作するはずです。コードは次のようになります。
// template
<div v-for="data in axiosResult">
<p>{{data.name}}</p>
</div>
//script
<script>
data(){
id: ['1', '2', '3'],
axiosResult: [],
},
methods:{
getData(){
//axios call
this.id.forEach((id) => {
//axios function for each id
axiosCall(id).then((result) => {
this.axiosResult.push(result);
});
});
}
}
</script>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加