How to get line breaks with Javascript and VUE

Question

In a response from an API I get a plain text that contains line breaks in this way:

"plain_text": "INFORMACION DEL PRODUCTO:\n\nProducto:

How can I use these line breaks (\n\n) when printing on WEB page with Javascript (I'm using VUE) ?

Since it only passes the text without the line breaks.

I add image of how it prints with VUE but in the inspector if it appears with the line breaks.

Answer 1

Use the CSS white-space property...

const res = {"plain_text": "\t\t\t\tINFORMACION DEL PRODUCTO:\n\nProducto:"}
new Vue({
  el: '#app',
  data: { res }
})

.pre-formatted {
  white-space: pre-wrap; /* 👈 this is the important part */
  border: 1px dotted;
  padding: 1rem;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <p class="pre-formatted">{{res.plain_text}}</p>
</div>

Answer 2

In html white-spaces are compressed into a single space. Check this for a similar post.

To have line-breaks in rendered html, you have to manually replace the '\n' with <br/> tags.