Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS newline character is not rendered correctly

Tags:

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?

like image 444
Tobias Schäfer Avatar asked Mar 13 '18 19:03

Tobias Schäfer


2 Answers

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>
like image 109
Lawrence Cherone Avatar answered Sep 24 '22 20:09

Lawrence Cherone


Use the <pre></pre> tag to preserve the preformated text. More info MDN Pre tag docs

new Vue({    el: '#app',    data: {      text: 'Hello, \n what\'s up? \n My name is Joe'    }  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>    <div id="app">    <pre>{{ text }}</pre>  </div>
like image 34
DobleL Avatar answered Sep 24 '22 20:09

DobleL