Style in Vuejs and responsive-CodePudding

I'm trying to style my data in Vuejs, I want every property to be vertical. every item in conversationHistory should be vertical not on the same line. how can I do that in vuejs? anyone can help?

<template>

<h2 >Messages</h2>

<div v-if="messages?.conversationHistory" >

{{ messages.conversationHistory[0].action }}
{{ messages.conversationHistory[0].messageId }}
{{ messages.conversationHistory[0].attachments }}
{{ messages.conversationHistory[0].body }}
{{ messages.conversationHistory[0].from }}
{{ messages.conversationHistory[0].to }}
{{ messages.conversationHistory[0].cc }}
{{ messages.conversationHistory[0].subject }}
{{ messages.conversationHistory[0].sent }}

 </div>
</template>

<script>

import axios from 'axios';


export default {
    name: 'message-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>

CodePudding user response：

You can achieve this by using white-space property which is used to handled white space inside an element. To achieve the line break you can use pre-line value which will collapse the sequence of whitespace into a single whitespace.

div {
  white-space: pre-line;
}

Or else you can also directly wrap the content inside <pre> element in the HTML template itself.

<pre>
  {{ ... }}
  {{ ... }}
  {{ ... }}
  ...
</pre>

Live Demo :

new Vue({
  el: '#app',
  data: {
    messages: {
        conversationHistory: [{
        action: 'Alpha',
        messageId: 123,
        body: 'hello'
      }]
    }
  }
})

p {
  white-space: pre-line;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(msg, index) in messages.conversationHistory" :key="index">
    <p>{{ msg.action }}
    {{ msg.messageId }}
    {{ msg.body }}</p>
    
<pre>
    {{ msg.action }}
    {{ msg.messageId }}
    {{ msg.body }}
</pre>
  </div>
</div>