Question

96

VueJS newline character is not rendered correctly

rated 0 times [ 100] [ 4] / answers: 1 / hits: 32034 / 6 Years ago, tue, march 13, 2018, 12:00:00

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

But when I do something like:

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

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

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

What am I doing wrong here?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalistaz

Add To Favorites

Follow

Total Points: 0

Total Questions: 100

Total Answers: 106

Location: Bermuda

Member since Thu, Apr 20, 2023

1 Year ago

answered 6 Years ago kieraelsies · Accepted Answer

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.nThis is a line of text.nAnother line of text.n'

  }

})

.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>