Display Axios response data in Vue.JS

Question

I wrote this Vue.JS code to display JSON response received from PHP file in a conversation format. My current code looks like this:

    const app = new Vue({
    el: "#chatview",
    data: {
            messages:[],
            txtInput: '',
            mid:0
        },
    methods:{

    GetBubbleType: function (name){     
                    if(name === "AI")
                     return "yours messages";
                    else
                     return "mine messages";
                },
   },   
   mounted(){
        axios.post('./ConversationGetter.php',{
            function2call: 'getRecord',
            id: 1,
        }).then( response =>  {console.log(response.data);
         this.data=response.data;
        }).catch(error => {});

        },      
  template: `
  <div style ="font-family:Open Sans;font-size:16px">
  <div v-for="message in messages">
    <div class="fade-in">
      <div v-bind:class="GetBubbleType(message.name)">
        <div class="message last">
          <p>{{message.message}}</p>
        </div>
      </div>
    </div>
  </div>
  <form @submit.prevent="sendMessage('out')"  id="person-form">
    <p>
      <input type="text" placeholder="Enter Your Query Here"style=" border-radius=25px" v-model="txtInput">
      </input>
      <input type="submit" placeholder="Send"style=" border-radius=25px">
      </input>
    </p>
  </form>
</div>

  `
})

The response recieved from PHP is (written on console):

{
  "data": [
    {
      "Modified_Time": "2019-12-13T16:08:36+05:30",
      "$currency_symbol": "$",
      "Message": "Hey!",
      "Created_Time": "2019-12-13T16:08:36+05:30",
      "Name": "AI",
    },
    {

      "Modified_Time": "2019-12-13T16:08:27+05:30",
      "$currency_symbol": "$",
      "Message": "Yo!",
      "Created_Time": "2019-12-13T16:08:27+05:30",
      "Name": "Me",
    },

  ],
}

The return line of PHP is: echo $result; return $result;

For some reason, it does not show the messages in the chat view.. Where am I going wrong?

Matt U · Accepted Answer · 2019-12-16 06:05:36Z

2

Your template is doing a v-for on the messages object from the component's data. However, you're assigning this.data=response.data. That's creating a property data on the component instance, not assigning the messages value.

Instead, just change this.data=response.data to this.messages=response.data.data.

As noted in the comments, your response body contains a data array at the root, and Axios returns the response body in response.data, hence response.data.data is what should be assigned to this.messages.

edited Dec 16, 2019 at 6:05

answered Dec 16, 2019 at 5:22

Matt U

5,12811 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shri Over a year ago

Thanks for your answer. Now it prints two empty messages. I guess there is some problem with accessing tree structure.. Where am I going wrong?

Matt U Over a year ago

Case sensitivity. Instead of message.name and message.mesaage in your template, change those to message.Name and message.Message.

Shri Over a year ago

Still doesn't work. The entire response gets stored inside "messages" making it form a tree structure messages->data->0->message=Something.

Matt U Over a year ago

Ah, so your data has a data property at the root? The response in axios has the response body at response.data. so you'll need to do this.messages=response.data.data

Collectives™ on Stack Overflow

Display Axios response data in Vue.JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related