API data In VueJS-CodePudding

I'm trying to show email conversation data in vuejs. Somehow It's not rendering on the page. I fetch the conversation on the pages but can't show it properly like an email thread. Here is my code below. can someone help me?

<template>
<div v-for="item in messages" v-bind:key="item" >
         
     {{messages.conversationHistory}}
         
      </div>
 
  </template>
  
  <script>
  import axios from 'axios';
  
  
  export default {
      name: 'consume-rest-api',
      data(){
          return{
              messages: null,
              
          }
      },
  
      created() {
          axios.get(`http://sa-test-task-2022.s3-website.eu-north-1.amazonaws.com/messages`)
              .then(response => {
                  // JSON responses are automatically parsed.
                  this.messages = response.data
              })
              .catch(e => {
                  this.errors.push(e)
              });
      }
  }
  </script>
  
  <style scoped>
  </style>

CodePudding user response：

wrap the v-for in another div because you can only have 1 root element (the v-for will end up generating multiple sibling divs)
objects should not be used as :key values. use a string or number, e.g. :key="item.messageId"

Fixed template code:

<template>
  <div> 
    <div v-for="item in messages" v-bind:key="item.messageId" >
      {{ messages.conversationHistory }}
    </div>
  </div>
</template>

If you only want to print the first conversation (the v-if ensures the conversationHistory exists before trying to render):

<template>
  <div v-if="messages?.conversationHistory">
    {{ messages.conversationHistory[0] }}
  </div>
</template>