Vue 2 cycle does not work in component

Question

Vue 2 cycle does not work in component

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

The idea is to go through the collection of messages ( messages ) obtained from the backend through AJAX and display them in the HTML, for this use v-for . Apparently the parameters returned by data are not receiving the 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);
  }
}

javascript vue.js

asked by Alfredo Ramirez Ortega 08.02.2017 в 23:01

source

3 answers

1

Try the following:

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

answered by 22.03.2017 в 18:06

0

You need to declare 'this' (self) out of the ajax call.

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

answered by 23.03.2017 в 16:04

Multiple canvas How to use the "pointer formalism" to calculate the average of a table?

score 0 · Accepted Answer

The problem was solved by using the "props", that was all. Thank you very much for your help to all. Thanks.

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