0

La idea es recorrer la colección de mensajes (messages) obtenidas del backend mediante AJAX y mostrarlos en el HTML, para ésto uso v-for. Al parecer los parámetros regresados por data no los está recibiendo el template.

Template

<template lang="html">
    <a v-for="message in messages" href="#">
        <div class="user-img">
            <img src="/assets/plugins/images/users/pawandeep.jpg" alt="user" class="img-circle">
            <span class="profile-status away busy offline online pull-right"></span>
        </div>
        <div class="mail-contnet">
            <h5 vue-text="message.title"></h5>
            <span class="mail-desc">Content</span>
            <span class="time">Date</span>
        </div>
    </a>
</template>

JavaScript

export default {
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this
      .$http.get('/api/messages')
      .then(response => this.messages = response.data);
  }
}
2
  • 1
    Hola Alfredo. Te comento que el código lo debes poner aquí para que sea más práctico y sencillo para la gente que te ayuda o visitantes poder verlo. Por esta vez lo he hecho por ti, recuerda hacerlo en tu próxima pregunta.
    – gugadev
    Commented el 9 feb. 2017 a las 14:02
  • 1
    Respecto a tu pregunta, la información que trae el módulo $http de vue-resource está en el atributo body del objeto Response. Es decir, deberías reemplazar response.data con response.body.
    – gugadev
    Commented el 9 feb. 2017 a las 14:04

3 respuestas 3

1

Intenta lo siguiente:

export default {
data() {
    return {
        messages: []
    }
},
mounted() {
    this.$http.get('/api/messages')
        .then(response => {
            this.messages = reponse.body
        })
}
0

Necesitas declarar el 'this'(self) fuera de la llamada ajax.

    export default {
    data() {
        return {
            messages: []
        }
    },
    mounted() {
        var self = this
        this.$http.get('/api/messages')
            .then(response => {
                self.messages = reponse.body
            })
    }
2
  • 1
    No es así, porque está utilizando una función flecha y estas no recuerdan ningún contexto. Si en lugar de usar una función flecha hubiese usado una función normal, entonces sí sería necesario almacenar el contexto en una variable o en su defecto usar .bind.
    – gugadev
    Commented el 23 mar. 2017 a las 15:13
  • Gracias por la aclaración!
    – G. Levano
    Commented el 27 oct. 2017 a las 20:29
0

El problema se soluciono haciendo uso de las "props", eso era todo. Muchas gracias por su ayuda a todos.

export default {
  props() {
      return ['messages']
  },
  data() {
    return {
      messages: []
    }
  },
  mounted() {
    this
      .$http.get('/api/messages')
      .then(response => this.messages = response.data);
    }
  }
}

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.