How to assign HTML code to a variable in Vue.js-CodePudding

I would like to include some HTML in a variable within my Vue.js 3 setup() function to use later within the template.

When I try the following, I get an error of "VueCompilerError: Invalid end tag." because Vue seems to think it is part of the component's code (which of course it is not).

<script>
imports...

setup() {

const a = a;
const b = b;

const MyHTML = '<script></script>'  // Vue thinks the </script> tag is part of the code
}
</script> // This gets thrown an error of VueCompilerError: Invalid end tag.

How can I then store HTML as a string within a variable without it being interpreted by Vue?

CodePudding user response：

I search about that and find several solutions. one of the solutions is below the line. and I think this is the best solution

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

another funny solution is

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