2

estoy iterando unos datos con una propiedad computada en un v-for uso axios para obtener datosde una api externa veran el codigo

                      <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>

en el 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;


                })
        },

veran con el metodo obtego todos los juegos y con la propiedad computada hago un bucle para obtener los logros por cada uno de los juegos obtenidos y en genera esta bienintroducir la descripción de la imagen aquí

como pueden ver si cumple el requisito pero cuando va al v-for parece que no espera a que se complete la peticion ajax y no muestra el logro en la tabla parece que itera los datos en el v-for antes de realizar toda la accion de la propieda computada

3
  • No es lo que esta pasando. Si completa la peticion. El problema es que la propiedad computada no se ejecuta, porque tu objeto "no cambio". Vos pensas que cambio, pero como bien esta explicado en el manual de VUE, cuando un objeto (en este caso tu array) cambia un valor, no ocurre la reactividad, porque las propiedades del objeto no son reactivas. Mira aca: vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats
    – gbianchi
    Commented el 31 dic. 2018 a las 1:35
  • y como hago amigo Commented el 31 dic. 2018 a las 1:37
  • Ahi te pongo una respuesta. Pero en el manual esta la respuesta.
    – gbianchi
    Commented el 31 dic. 2018 a las 1:37

1 respuesta 1

2

Las propiedades de un objeto no son reactivas, y esta explicado en el manual de vue aca.

Para que tu array sea reactiva, asigna lo nuevo que recibis usando un objet.Assign

Object.assign(tuobjeto, elnuevoobjeto)

Asi, que en el regreso de tu axios, deberias hacer algo asi:

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

Y de esta forma, el objeto reaccionara y se ejecutara tu v-for.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.