Vue v-html not render \r \n \t - html

Question

I have data like this :
data: {
content:"<p><span style=\"font-size:16px\">Berikut adalah beberapa pemberontakan yang pernah terjadi di daerah.</span></p>\r\n\r\n<p><span style=\"font-size:16px\"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>\r\n\r\n<ul>\r\n\t<li><span style=\"font-size:16px\">di Bandung, pada 23 Januari 1950.</span></li>"
}
From the data I want to display it using Vue js.
This is my Vue js code:
<div class="row px-3" v-html="data.content"></div>
And if the above code is executed then the result is like this :
You can see, \r \n and \t don't seem to be rendering by Vue js
How to get \r \n and \t to be rendered by Vue js and can display as below?

Answer 1

\r, \n, and \t are not valid HTML; they are escape sequences that are used in other languages (so expecting them to work in HTML would be like pasting python code into a javascript file and expecting it to run.) You need to replace them with HTML that does what you want it to do. For new lines, the <br> tag could be used, but traditionally people handle line breaks by wrapping their sections in paragraphs (<p>) or divs (<div>). For tabs, you'll need to google for how to handle indenting in HTML as there is a lot more to say about it than I can explain in a short answer here.

Answer 2

I don't have the complete code, but after first read :
Try
v-html="content"
and
data(){
return {
content: "<p><span style=\"font-size:16px\">Berikut adalah beberapa pemberontakan yang pernah terjadi di daerah.</span></p>\r\n\r\n<p><span style=\"font-size:16px\"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>\r\n\r\n<ul>\r\n\t<li><span style=\"font-size:16px\">di Bandung, pada 23 Januari 1950.</span></li>"
}
}