I'm iterating some data with a computed property in a v-for use axios to obtain data from an external api you will see the code
<table class="table">
<thead>
<tr>
<th>id</th>
<th>casa</th>
</tr>
</thead>
<tbody>
<<tr v-for="values in juegosYlogros " :key="values.id">
<td>{{values.id}}</td>
<td>{{values.ganajuegoCasa}}</td>
</tr>
</tbody>
</table>
in the js
computed:{
juegosYlogros: function () {
var me = this
let juegosYlogros = this.games.map(p =>{
axios.get('https://api.betsapi.com/v1/bet365/start_sp?token='+ this.apikey + '&FI='+ p.id)
.then(response =>{
var respuesta = response.data.results
p.ganajuegoCasa = respuesta.find((el) => { return el.FI === p.id}).main.sp.full_time_result[0].odds
console.log(p.ganajuegoCasa)
});
return p
})
return juegosYlogros
}
},
methods: {
ProximosJuegos(sport_id, token, day, page, league_id) {
var me = this;
axios.get('https://api.b365api.com/v1/bet365/upcoming?sport_id=' + sport_id + '&token=' + token + '&day=' + day + '&page=' + page)
.then(response => {
me.games = response.data.results;
})
},
will see with the method I get all the games and with the computed property I loop to obtain the achievements for each one of the obtained games and in general this is fine
As you can see if it fulfills the requirement but when it goes to the v-for it seems that it does not wait for the ajax request to be completed and it does not show the achievement in the table it seems that it iterates the data in the v-for before performing all the action of the computed property