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

Question

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?

Could you please post a reproducible example so people can verify in a clean env that this isn't working? — ccarstens
– ccarstens, Commented Oct 8, 2021 at 10:31
You can make it with backslash const MyHTML = '\<script\>\<\/script\>' — ZloiGoroh
– ZloiGoroh, Commented Oct 8, 2021 at 10:33

ElsaKarami · Accepted Answer · 2021-10-09 07:33:36Z

4

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>......';

edited Oct 9, 2021 at 7:33

answered Oct 8, 2021 at 11:17

ElsaKarami

6461 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related