When Vue.js is compiled, it removes a script tag

I'm currently learning Vue.js and encountering an issue that I can't seem to resolve. My project is utilizing Vue CLI 3, and within my code I am inserting a custom tag (not a component) in my template with a script tag inside it.

<ra type="outstream" pid="888666574" ra_init="open" ra_end="open" skin="dark" hasConsent="1">
    <script type="text/javascript" src="https://s.test.com/script.js"></script>
</ra>

This script is designed to target the custom tag ra, hence it needs to be contained within the tag itself. However, when I inspect the site using devTools, the ra tag appears empty - meaning the script isn't present. My speculation is that Vue may be removing the script for security reasons such as preventing XSS attacks, but I absolutely need this script to execute.

Has anyone encountered this issue before? Any insights would be greatly appreciated!

Thanks! :)

javascriptvue.jsvue-clivue-cli-3

Answer №1

mounted() {
  let script = document.createElement('script');
  script.setAttribute('src', 'https://s.example.com/script.js');

  let container = document.createElement('div');
  container.appendChild(script);
  container.setAttribute('pid','888666574');
  container.setAttribute('ra_init','open');
  container.setAttribute('ra_end','open');
  container.setAttribute('skin','dark');
  container.setAttribute('hasConsent','1');
  document.body.appendChild(container);
}

Give this code a try and see if it works for you!

Answer №2

To ensure that VueJs does not remove script tags, simply place them within the template tag as shown below:

<template>
    <script></script>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

looping through a collection of table rows using v-for

In a Vue app, I am facing an issue with rendering multiple table rows for each item in a collection. The current markup I have for rendering the table body is as follows: <tbody> <template v-for="item in collection"> <tr> < ...

vue.js

The text box remains disabled even after clearing a correlated text box with Selenium WebDriver

My webpage has two text boxes: Name input box: <input type="text" onblur="matchUserName(true)" onkeyup="clearOther('txtUserName','txtUserID')" onkeydown="Search_OnKeyDown(event,this)" style="width: 250px; background-color: rgb(255, ...

javascriptjavahtmlseleniumselenium-webdriver

Attempting to create a pathway for removing a profile and user from mongoDB

Hello, StackOverflow community! This is my initial post here and I'm excited to seek guidance. I recently created a delete route in Express to delete both a user and their profile: // @route DELETE api/profile/ // @desc Delete user and profile / ...

javascriptnode.jsmongodbexpress

Why does the loginStatus in Redux become undefined when the component is initially rendered?

Currently diving into Redux and encountering a problem that is new to me as I usually work with React without redux. The issue arises when I attempt to showcase a portion of my state within a component named loginStatus. Despite setting up the state in the ...

javascriptreactjsredux

Challenges arise when employing angular scope functions in the context of the DOM (html)

UPDATE: Encountered an issue caused by attempting to iterate over a function's return value using ng-repeat \ ng-options, rather than converting the data into a regular object through a promise. Here is the code snippet: $scope.layout.getParti ...

javascriptangularjsangularjs-ng-include

Could you clarify the significance of the brackets in this TypeScript Lambda Expression?

I'm currently delving into an Angular book, but I'm struggling to locate any definitive documentation regarding the usage of square brackets in a lambda expression like [hours, rate]) => this.total = hours * rate. While I grasp that these para ...

javascripttypescriptlambdaecmascript-6

Guide to integrating Webpack 3.8.1 into a Vue application

So I have this scaffold: https://github.com/vuejs/vue-cli Now, my goal is to integrate Webpack 3.8.1 into it. There's an existing "build" folder with numerous webpack files in it : https://i.stack.imgur.com/MJ3JP.png However, when I try running "w ...

npmwebpackvue.jsvuejs2

Is there a way to dynamically add an option to multiple select boxes and then only redirect the browser if that specific option is chosen using jquery/js?

Presently, this is the code I am working with. The URL validator is specifically included because there was an issue with redirection occurring on any option selected, however, I only want a redirect to happen when the options I add with jQuery are clicked ...

javascriptjquery

Changing buffer from base64 to UTF-8 encoding in Node.js

My application imports messages from the Notes folder of Gmail using the imap npm module. When following the example on their GitHub page, all message contents are read into a buffer: stream.on('data', function(chunk) { count += chunk.len ...

javascriptnode.jsencodingutf-8base64

The presence of foreign collections does not appear to be reflected in the combined data

I am developing a basic forum and I'm looking to connect two databases so I can show information about the user who created a post on that post: User.js: _id:60ccb13a21d65f0c7c4c0690 username: testuser name: test And Createpost.js _id:60d80b1305dcc5 ...

javascriptnode.jsmongodbexpressejs

Establishing a connection between a Google spreadsheet to create and automatically update calendar events

I'm currently working on connecting my Google Sheet to a calendar so that it can automatically generate calendar events and keep them updated based on changes made in the sheet. The Google Sheet I'm using tracks new building opening dates and con ...

javascriptgoogle-apps-scriptgoogle-sheetsgoogle-calendar-api

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

What is the best way to adjust only the value of the current select box and not all others with the same name?

I have set up five select boxes with a dependent select box, where the value of the second select box changes based on what I select in the first one. <tr> <td> <select name="brand" class="form-control select2" id ="brand"> <option v ...

javascriptphpajaxlaravel

Tips for assigning a unique number or identifier to each element in vue js?

In my situation, I am working on creating a dynamic form (similar to a to-do list app) in separate components. I need to make sure each element (div) has a unique identifier for accessibility and other actions. However, when I try to use an increment metho ...

vue.js

Load HighCharts dynamically in a sequential manner

Currently, I am working on dynamically loading a variety of series based on user-selected projects. My tech stack includes Laravel 5.2, PHP 5.6, and HighCharts. I've successfully loaded one JSON file generated upon project selection. However, I aim to ...

javascriptphpjqueryjsonhighcharts

Modal containing react-select dropdown opens successfully

I am currently facing an issue with my custom modal that contains 2 react-select components. The modal body is set up to auto scroll when the content exceeds its size, but the problem arises when the dropdowns of the react-select components open within the ...

javascriptreactjsreact-selectcss-modules

I am unsure how this type of jQuery AJAX data : () will be interpreted

I'm not a beginner nor an expert in jQuery. I'm modifying a jQuery code for opencard checkout section. There is a Javascript file in this section that sends data to the server. I came across an AJAX request with data structured like this: url: ...

javascriptjqueryajaxopencart

The table appears to be fixed in place and will not scroll, even though the data

Previously, my code was functioning perfectly with the mCustomScrollbar I implemented to scroll both vertically and horizontally on my table. However, while revising my jQuery code for organization purposes, I seem to have unknowingly altered something tha ...

javascriptjqueryhtml

Inverting the hierarchy of a tree structure

I am currently working with a tree structure and utilizing the jstree jQuery plugin. My main objective is to reverse the structure. The desired structure should resemble the one shown in this image. I have made modifications using MS Word, so it does not ...

javascriptjqueryhtml

Refreshing Three.js Scene to its Initial State

I am in the process of developing a Visual Editor where I can manipulate objects by adding, deleting, and transforming them. Currently, my scene only consists of a 5000x5000 plane as the floor. I am looking for a way to reset the scene back to its origin ...

javascriptthree.jsscene