My objective is to assign a block or JavaScript code into a JavaScript variable so that I can display a block similar to the one shown below in my Vue template. https://i.sstatic.net/rE0UV.png
It is possible to add a block of HTML code into a JavaScript variable without any issues. However, when I attempt to assign HTML/JSX code along with JavaScript, it results in an error. For example:
contextualVariation:
<template>
<Badge
v-for="varient in colors"
:key="varient.color"
:color="varient.color"
:colorName="varient.colorName"
class="mr-2"
/>
</template>
No error occurs with the above code. But when I tried the following:
<template>
<Badge
v-for="varient in colors"
:key="varient.color"
:color="varient.color"
:colorName="varient.colorName"
class="mr-2"
/>
</template>
<script>
. . . . some codes . . . .
</script>
An error is now generated. How can this issue be resolved? Thank you in advance.
Note: My intention is to utilize this variable in a live preview setup like this:
<live-preview :code=contextualVariation showCode="true" class=""/>