[Vuejs]-List down an array of messages from the converstions

by

0👍

Alright let’s assume that this is how your response is structured:

{
  all_staff_attended: false,
  centre_id: 5,
  messages: Array[5]
  ...etc.
}

Then when you call your getConversations method you could make your data property this.conversations equal to messages array from your response:

getConversations(id) {
     console.log(this.url+id);
     axios.get(this.url+ id)
     .then(response => {
        //from your response you would want to get messages array
        this.conversations = response.data.messages;
     })             
}

Once you got your messages array, you can then loop through it with v-for like so:

<ul>
   <li v-for="(conversation,index) in conversation" :key="conversation.id">
      <div>
          <p>Message: {{conversation.text}}</p>
          <p>User: {{conversation.user.name}}</p>
          <p>Created at: {{conversation.createdAt}}</p>
      </div>
   </li>
</ul>

Now, you can access each object of the messages array like in the example above.

Leave a comment