How do you inject dynamically constructed HTML that requires events to be subscribed to?

I have a scenario that i do not know how to implement in Ionic Vue. My app needs to mark-up the text entered by the user with visual tags, which are clickable, in my mobile Ionic app. E.g.,

How do I inject the HTML so that it is compiled by Ionic Vue and handlers assigned when someone taps the colored tags?

Disclaimer: I’ve zero experience with Vue, so this is going to be a generic response that you’ll likely want to just ignore anyway, because it’s going to try to convince you not to go down this road at all. Additionally, I apologize for the fact that the links in this post go to Angular topics, because that’s the framework I work in.

HTML is a relatively difficult language to parse and treat in a structured fashion, largely because so many things that were never intended in the first place have been shoehorned into it. Because it can also contain content that is “executable code” for most purposes, it’s got significant security concerns that require vigilant mitigation, especially when dealing with user-generated content.

I would urge you to pick something other than HTML as your domain transfer language here, and render that into HTML as part of your app. Some subset of JSON will probably be easiest to work with, but I’ve used this basic strategy with Markdown to implement message board functionality in an Ionic app.

One massive upside of going that route is that your current problem gets completely designed away, because you don’t have to worry about complex sanitization rules at all, and can just lay your content out as a heterogeneous list. Your colored box things can respond to events, have tooltips, twirl around in circles, or whatever you desire.

So I could create a custom component for rendering a word, and another for tag, and inject them all inline as regular components. The texts are not long, but this would produce a sequence of about 100 components inline. But I see what you are saying.

Here’s where my Vue ignorance is going to be felt, because I can’t say whether that’s necessarily true or not. With Angular, there is a notion of a “template fragment” that is substantially lighter in weight than a full component, and there isn’t a need to actually make an actual “component” just to render a word or a hyperlink or a shoutout or whatever - those are just template fragments in a single component. The rendering engine goes through a loop and picks out the proper fragment to render into the DOM.

I’ll try it out and report back.

So cryptic Fragments | Vue.js