Style in Vuejs and responsive

Question

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 class="Email">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>

It's preferable to generate a layout that is easy to style. In this case these lines could be wrapped with span — Estus Flask, Sep 11 '22 at 21:54

score 0 · Accepted Answer · answered Sep 12 '22 at 06:28

0

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>

answered Sep 12 '22 at 06:28

Debug Diva

26,058
13
70
123

I have fetch the data but somehow I'm not able to display it properly , its an email thread. can you see this and I hope you understand this better. – Nayab Lone Sep 12 '22 at 07:59
Can you see my script thats the Api email thread that i'm trying to display . Can you help? – Nayab Lone Sep 12 '22 at 08:03
By adding this css `div { white-space: pre-line; }` will resolve your problem or you can add a class in the div element and then apply this style to that class. – Debug Diva Sep 12 '22 at 08:13
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10%; width:367px; height: 46vh; margin: 15px 10px 10px 45px; white-space: pre-line; } – Nayab Lone Sep 12 '22 at 08:21
this is my css for the div . – Nayab Lone Sep 12 '22 at 08:21
I did not see any grid in your code. Now it is going in some different direction. i added my answer as per your requirement and code you mentioned in post. – Debug Diva Sep 12 '22 at 08:24
You want to show each expression in a new line and that's what I worked and it is showing like that. – Debug Diva Sep 12 '22 at 08:26
1

yes Rohit bhai, its in different line how. I have to manage it . now I have to make a delete button to so i can delete all this and when refresh the whole email conversation comes back again. but thank you again Bhai. – Nayab Lone Sep 12 '22 at 08:29

Style in Vuejs and responsive

1 Answers1