[Vuejs]-Vus Js – How to show javascript code with opening and closing script tag as v-html or in textarea input box

by

1👍

✅

I’ve found a solution to display HTML code as plain text in a Vue.js template. You can achieve this by using the v-html directive Here’s an example implementation:

<b-form-textarea readonly name="thank_you" id="textarea" v-html="thank_you" rows="20" max-rows="10"></b-form-textarea>

In the above code snippet, I bind the thank_you variable to the v-html directive, which tells Vue.js to interpret the content as HTML. the content is displayed as preformatted text, maintaining the formatting and rendering the code as plain text.

To incorporate the tags at the beginning and end of the code, you can make the following adjustment in your Vue component’s data section:

        this.thank_you = "&lt;script&gt;" + code + "&lt;/script&gt;";

Please remember to replace code with your actual code string.

Following these changes, the code will be rendered as plain text within the template, including the tags, without causing conflicts with the Vue.js template syntax.

Ensure that you properly escape any HTML entities or special characters in the code to ensure correct rendering and prevent any potential security vulnerabilities.

👤Besartt

Leave a comment