javascript - VueJS newline character is not rendered correctly

Question

I got the following problem, I read data string from an API which contains new line characters and I want to display them correctly in my template.

But when I do something like:

<p>{{ mytext }}</p>

The text is display with characters in it like normal text.

The text string from the response is in the format of "Hello, what's up? My name is Joe".

What am I doing wrong here?

Answer 1

Not even a vue issue you could simply use CSS and apply white-space: pre; to the content. You shouldn't need an additional package for this.

new Vue({
  el: '#app',
  data: {
    text: 'Hello Vue.
This is a line of text.
Another line of text.
'
  }
})

.pre-formatted {
  white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="pre-formatted">{{ text }}</div>
</div>