v-html cannot be rendered in Vue\r\n\t

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>rnrn<p><span style="font-size:16px"><strong>1. Pemberontakan Angkatan Perang Ratu Adil (APRA) </strong></span></p>rnrn<ul>rnt<li><span style="font-size:16px">di Bandung, pada 23 Januari 1950.</span></li>"
}

Based on 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>

If you execute the above code, the result will be like this:

As you can see, rn and t do not seem to be rendered by Vue js

How to let r n and t be rendered by Vue js and displayed as follows?

Answer 1

\r, \n, and \t are not valid HTML; they are escapes used in other languages sequence (so expecting them to work in HTML is like pasting python code into a javascript file and expecting it to run.) You need to replace them with HTML to do what you want it to do. For new lines, it is possible to use the <br> tag, but traditionally people have used ;) to handle newlines. For tabs, you'll need to google how to handle indentation in HTML because there's a lot out there about it that I can't explain in a short answer here.