Assigning HTML code to a variable in Vue.js: A Step-by-Step Guide

I am looking to store HTML in a variable within my Vue.js 3 setup() function so that I can use it later in the template.

However, when I attempt to do so, I encounter an error message stating

"VueCompilerError: Invalid end tag."
. It appears that Vue is mistaking the HTML for part of the component's code, even though it is not.

<script>
imports...

setup() {

const a = valueA;
const b = valueB;

const MyHTML = '<script></script>' // Vue falsely interprets the </script> tag as code
}
</script> // This results in a VueCompilerError: Invalid end tag.

Is there a way to save HTML as a string in a variable without Vue trying to parse it?

Answer №1

After conducting thorough research, I have discovered multiple solutions to the problem at hand. One of the most effective solutions can be found below.

<div v-html="MyHTML"></div>
// eslint-disable-next-line no-useless-escape
const MyHTML = ref('<script><\/script>');

In addition, another interesting solution is:

const MyHTML = '...... </scr'+'ipt>......';

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

Transfer an array via Ajax to a Python server script

I need to send the names, values, and labels of my form elements when a button is clicked. Since the submit button messes up the order, I decided to handle it with JavaScript: $('#mybutton').click(function() { m.modal('show'); ...

What could be the reason this is not getting saved in the public directory and causing a 404 error on the network

Within connection.js on the backend, there is a 2nd code snippet located inside post.jsx on the front end. router.post("/upload", (req, res) => { if (req.file === null) { return res.status(400).json({ msg: "No file uploaded" }); } const f ...

Encountered an error loading resource: server returned a 400 (Bad Request) status when using Angular with NodeJS

My Angular and NodeJS application with Express (v4.17.1) exposes a REST API like this: app.get('/myRestApi', function (req, res) { console.log('here you are ... '); res.end('success!\n'); }); The body of this API ...

Retrieve input field values using the jQuery Taggd plugin in edit mode

Incorporating the jQuery taggd plugin has been smooth sailing so far. I made a few tweaks, specifically to use it in edit mode. In this edit mode, when a user inputs a value in the textbox, the plugin checks whether it is a URL or a string. If it's a ...

The Javascript code is failing to run following an ajax request

When I use XMLHttpRequest.send to call a php script that contains some javascript code, the javasript in the called php script does not run. The process of making the call: var formdata = new FormData(); formdata.append("uploadfilename", file); var ajax ...

Animate a box moving continuously from the right to the left using jQuery

I'm trying to create a continuous motion where a box moves right, then left, and repeats the cycle. However, I can only get it to complete one cycle. $(document).ready(function() { function moveBox() { $('#foo').css({ 'ri ...

Prevent overlapping of nodes and edges in a D3 force-directed layout

Check out this fascinating example at http://bl.ocks.org/mbostock/1747543: In the demonstration, Mike illustrates how to prevent nodes from colliding with each other in a graph. I'm curious if it's feasible to also prevent collisions between no ...

Achieve a sticky y-axis while scrolling horizontally with chartJS and Angular

Is there a way to keep the y-axis fixed while scrolling horizontally? Below is an example that achieves this functionality without Angular: $(document).ready(function () { function generateLabels() { var chartLabels = []; for (x = ...

Tips for encapsulating an image generated using execCommand

<input type="button" onclick="document.execCommand('insertimage',null,'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg');" value="Img"/> <br> <div contenteditable="true" class="editor" id="edit ...

Exploring the Solution for Connecting Angular FormArray with mat-select options and input fields

Encountering a situation where the user can open a mat-select and choose an option from the dropdown, triggering the display of a hidden form for filling. Initially, this worked fine with a static template. But now, we have transitioned to linking the mat- ...

What is the best way to calculate the total of elements from multiple arrays of various lengths using Javascript?

Is there a way to modify the code below to allow for adding an arbitrary number of arrays as arguments? For instance, how can I adjust it so that ([1, 2, 3], [4, 5], [6]) would result in an array of [11, 7, 3]? function addArrays(...arrays) { let resu ...

Why is the function not being invoked in Ext JS?

Ext.define('iTell.view.MarketView', { extend: 'Ext.Container', xtype: 'marketview', config: { scrollable: false, layout: 'fit', items: [ { xtype: &apos ...

How to efficiently filter objects within a child array in an ng-repeat statement, utilizing track by $index to manage duplicates

I have a variable called narrow.searchedMenu that contains 3 arrays of equal length. To display them, I am using ng-repeat with track by $index due to some duplicate elements present. <ul> <li ng-repeat="item in narrow.searchedMenu.desc ...

Can you provide steps on loading JSON data into a JavaScript web application and then randomly selecting a word from it?

I have a text file called words.json with a long list of words, organized in alphabetical and length order. The structure looks like this: {"3":["ace","act","add","ado","ads"], "4":[...], ...} (I have used ellipsis for brevity) How do I go about loadin ...

How can a component receive data from its parent element?

While diving into Vue.js, I encountered a puzzling issue - why isn't <li>{{task.body}}</li> appearing on the screen? I've crafted a <tasks v-for="task in tasks"></tasks> component that requires access to data from its par ...

What is the optimal approach for managing server-side data stored as a JavaScript variable?

When dealing with global variables like JSON inserted into a web page server side with PHP, the best way to handle it is up for debate. Options might include leaving it for garbage collection, omitting var initialization and deleting the variable, or simpl ...

What is the best way to pass data to a slot in Vue using JSX?

//vue Single File Component <div> <slot myProp="myProp"></slot> </div> //vue JSX <div> {this.$slots.default}//How can I pass myProp here??? </div> Currently, I am working with vue and using jsx. Is there ...

expanding the expressjs res feature

I am currently working on implementing an error and notification feature for my expressjs app. My approach was to add a function by calling: app.use(function (req, res, next) { res.notice = function (msg) { res.send([Notice] ' + msg); } }); ...

By running a JavaScript file, the color of links can be dynamically altered

Recently, I created a website called Galant Jeans. When you hover over the menu items, they change to blue temporarily. This effect was not defined in the CSS but should be found in the menu.js file. Unfortunately, I have been unable to locate it within ...

Running NPM module via Cordova

After developing an app using cordova, I encountered a challenge where I needed to incorporate a node module that lacked a client-side equivalent due to file write stream requirements. My solution involved utilizing Cordova hooks by implementing an app_run ...