Is there a way to inject raw HTML using Vue, especially when the HTML contains Vue markup that needs to be evaluated?
Consider the following example where HTML is rendered from a variable:
<p v-html="markup"></p>
{
computed: {
markup() {
return 'Hello <em>World</em>!';
},
},
}
This approach works well, but what if the markup computed property includes a custom Vue component as well?
return 'Hello <em>World</em>! My name is <my-name></my-name>!';
In this situation, <my-name></my-name> will not be evaluated and will be rendered as-is.
How can I make it "Vue-fied" and how does scope work in such cases?