Process Vue bindings inside v-html or access instance from string template


This Content is from Stack Overflow. Question asked by SpaceKraken

I’m trying to figure out how to create a component that allows for search and replace of keywords with chunks of HTML that, alone, are not valid HTML. Additionally, all the HTML needs to be compiled by Vue at runtime. For example:

const structure = [];
const parts = [];
structure[0] = `
            <td :style="textStyle"></td>
                `; parts['thing'] = `
            <td :style="titleStyle">Optional Part</td>
                `; structure[1] = `

The main component template would essentially be structure[0] + databaseContent + structure[1]. And then if databaseContent had the string ::: thing ::: in it, it would be replaced with parts['thing']. Then the end result would have to be compiled by Vue at runtime.

I’m using the vue3-runtime-template package to solve the runtime compile problem. What I’m finding though, is when parts['thing'] is imported, the HTML gets all mangled as Vue sees it as invalid and attempts to fix it by removing the </td> and adding additional markup.

How can I organize this?


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?