Vue data iteration

2

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

    
asked by isaac josue castellanos perdom 31.12.2018 в 02:31
source

1 answer

2

The properties of an object are not reactive, and it is explained in the manual of vue here .

To make your array reactive, assign the new one you receive using an objet.Assign

Object.assign(tuobjeto, elnuevoobjeto)

So, in the return of your axios, you should do something like this:

Object.assign(me.games,response.data.results);

And in this way, the object will react and your v-for will be executed.

    
answered by 31.12.2018 в 02:41