Using Vue.js to inject plain text into a Vue component from HTML

Question

Using Vue.js to inject plain text into a Vue component from HTML

I am currently in the process of transitioning code from ASPX to VUE.JS.

In the previous system, there was a feature that allowed plain text to be injected into HTML (such as messages with text, images, links, and inputs). However, in VUE, the injected HTML is not functioning properly...

To illustrate the root issue, I have created a demo.

Explore CodeSandbox Example

Essentially, we are attempting to inject HTML into a VUE component similar to regular HTML... but it also contains JavaScript code within the plain HTML.

Here is an overview of the problem: https://i.sstatic.net/Uiw2s.png

Any suggestions on how to navigate around this issue? The plain text may involve various JavaScript functions (potentially over 50 different scenarios).

javascript vue.js vuejs2 code-injection

Answer 1

Answer №1

When trying to execute JavaScript with injected code like that, it may not work as expected. To check this, you can test by adding console.log('test') inside the <script> tag.

To fix this issue, you can add a regex function after your replace function, which will evaluate every script tag.

codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
  window.eval(match);
});

You can also find an improved version of your demo with the solution implemented here: https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue

Answer 2

When trying to execute JavaScript with injected code like that, it may not work as expected. To check this, you can test by adding console.log('test') inside the <script> tag.

To fix this issue, you can add a regex function after your replace function, which will evaluate every script tag.

codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
  window.eval(match);
});

You can also find an improved version of your demo with the solution implemented here: https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue

Answer 3

Answer №2

To enhance your code, consider utilizing the document.write(codeBlock); line right after executing your replace function.

Visit this link for more information.

Answer 4

To enhance your code, consider utilizing the document.write(codeBlock); line right after executing your replace function.

Visit this link for more information.

Using Vue.js to inject plain text into a Vue component from HTML

Answer №1

Answer №2

Similar questions

When developing a node.js project using VMWare's shared folder, how can you manage the node_modules folder?

Having Trouble Dividing Routes into Individual Files in Express Version 4.0

Using local file paths in v-lazy-image does not function properly

transform the stationary drawing to the top and left position at coordinate (0,0)

Passing Data from Child to Parent Components in ReactJS

Unable to configure AngularJS inputs to have a blank default value

Jade not responding to AngularJS click directive function

Create a global SCSS file in ReactJS that stores all variables, mixins, and more

The custom filter in AngularJS fails to activate when a click event occurs

How can we incorporate spans into child elements using JavaScript?

Implementing a dynamic function with jQuery Tokenize's change event

Learn how to use a function in Google Maps to calculate and display distances

What are the steps to add 8 columns to the second row in my table?

Does JavaScript automatically round large numbers?

React:error:unexpected punctuation

The issue arises when d3.scaleLinear returns NaN upon the second invocation

Struggling with Firebase website build failure on GitHub Actions because of node-sass?

Using AngularJS to apply filters to JSON data

When the modal is closed, the textarea data remains intact, while the model is cleared

bespoke filter designed to conceal any negative figures