I need to be able to wrap custom HTML around my Vue template content. As you can see below, it's not simply inserting html content using <div v-html="HtmlWrapperTopHalf"> because that will automatically close any unclosed tags. The tags will always be closed in the bottom half of the dynamic HTML. Basically, I'm looking to insert the Vue template code into my dynamic template HTML.
I also can't just assume what's in the dynamic HTML and build that inside the Vue template. This HTML comes from a RichText editor that my customers create on their own. They just insert a placeholder {{MAIN_CONTENT}} in the middle of their dynamic template and that's where the Vue Template functionality should appear.
Page.vue
<template>
<div>
//Top half of dynamic XHTML wrapper goes here
<p>Inner Content Here</p>
<ComponentA />
<ComponentB />
<!-- etc. --->
<p>More Inner Content</p>
//Bottom half of dynamic XHTML wrapper goes here
</div>
</template>
<script>
axios.get("getHtmlContent").then((result) =>{
console.log("top", result.data.HtmlWrapperTopHalf)
console.log("bottom", result.data.HtmlWrapperBottomHalf)
});
</script>
console.log
top: <div class="my-dynamic-class" id="my-unique-id"><h1>DYNAMIC TITLE</h1>
bottom: <div id="my-dynamic-footer">custom footer text</div></div>
HTML Output:
<div>
<div class="my-dynamic-class" id="my-unique-id"><h1>DYNAMIC TITLE</h1>
<p>Inner Content Here<p>
<div>Hello from ComponentA!!</div>
<div>Hello from ComponentB!!</div>
<!-- etc. --->
<p>More Inner Content<p>
<div id="my-dynamic-footer">custom footer text</div></div>
</div>
Hopefully this diagram of the concept will help:
{{MAIN_CONTENT}}and I split it on that delimiter so I can wrap it around the inner page content. Previously in WebForms.aspx (which we are migrating away from) this was easy because using an <asp:Literal> didn't automatically close the open tags from the top half. v-html closes them, though, which breaks the "wrapping" effect.