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

In my vus js application, I have this html code:

<b-row>
    <b-col md="12">
        <h5>Add the following code in the header of every page</h5>
        <b-form-textarea readonly name="header_code" id="textarea" v-model="header_code" rows="10" max-rows="6"></b-form-textarea>
    </b-col>
    <b-col md="12" class="mt-1">
        <h5>Add the following code on the thank you page, replace the demo data with live data</h5>
        <b-form-textarea readonly name="thank_you" id="textarea" v-model="thank_you" rows="10" max-rows="6"></b-form-textarea>
    </b-col>
</b-row>

Here, on this thank_you v-model I want set the javascript code along with opening and closing script tag so that user can copy the code.

What I am doing this :

created() {
    callThankYouCode
},
methods: {
    callThankYouCode() {
        const jsToken = this.jsToken;
        const code = `tsTracker(
'track',
'purchase',
{
    token:  '${this.jsToken}',
    items: [

            {item_id: "id1", quantity: X1 (numeric), price_per_item_without_vat: Y1 (numeric)},
            {item_id: "id2", quantity: X2 (numeric), price_per_item_without_vat: Y2 (numeric)},
            {item_id: "id3", quantity: X3 (numeric), price_per_item_without_vat: Y3 (numeric)}
    ],
    // Price without VAT = Price with VAT / (1 + VAT rate)
    order_total_without_vat: TOTAL_CART (numeric), // without shipping costs or applied discounts, must be numeric
    order_shipping_total_without_vat: TOTAL_SHIPPING (numeric), // shipping costs without VAT
    user_data: {
        // this is optional, but the data is usefull it you are planning to use Facebook Conversion API for a better matchig, it is recommended if you want to you POAS in Facebook, for GDPR you must add it in TOS
        email: "",
        phone: "",
        last_name: '',
        first_name: ''
    },
    currency: 'RON',
    transaction_id: 'ORDER_ID_OR_REFERENCE',
    other_costs: 0, // if there are any other costs, for example packing price etc, without VAT
    order_date: 'ORDER Placement date', // it should be exactly how its inserted in the database, not autogenerated with javascript, using the format Y-m-d H:i:s
}
);
        `;

        this.thank_you = code;
    },
}

On created hook I called this method callThankYouCode. On this method, I have set the thank_you data property value. It's working fine.

but

I want to add the opening and closing script tag on this code variable. If I do so then the application is not working. I see this type of error on the console log:

> [vue-router] Failed to resolve async component default: Error: Module
> build failed (from ./node_modules/babel-loader/lib/index.js):
> SyntaxError:
> /Applications/MAMP/htdocs/FeedParserProject/resources/js/src/views/apps/poas/settings.vue:
> Unterminated template. (456:32)
>
> 454 | 'purchase', 455 | {
> > 456 | token: '${this.jsToken}',
> | ^ 457 | items: [ 458 | 459 | {item_id: "id1", quantity: X1 (numeric),
> price_per_item_without_vat: Y1 (numeric)},

So, can you tell me how can I use a this javascript code with opening and closing script tag to the thank_you data propery and use it in the html area?

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:

<!-- language: lang-html -->

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

<!-- end snippet -->

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 <script> tags at the beginning and end of the code, you can make the following adjustment in your Vue component's data section:

<!-- language: lang-js -->

        this.thank_you = "<script>" + code + "</script>";

<!-- end snippet -->

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 <script> 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.