Home » vue » How do I use escape characters in vue?

How do I use escape characters in vue?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I want to build a website similar to codepen.
I made a library with assets (buttons, cards, effects…), and I am building it with vue.js.
Each asset contains html code, css code and if necessary js code. I also want to format that code, and in vanilla js I did that with escape characters (\n, \t).
Unfortunately, this does not work in vuejs.

It sounds weird, but the output should be formatted html code.
This is an example of a string vanilla js that did work:

'<button class="btn">Button 1 - Red hover effect</button>\n<button class="btn">Button 1 - Red hover effect</button>';

And this is the output:

<button class="btn">Button 1 - Red hover effect</button>
<button class="btn">Button 1 - Red hover effect</button>

I want to build the same thing, but with vue.

Does anyone know a solution to this problem?

Answers:

can use v-html api

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.