For a document editor tool I need to replace strings with clickable-elements, so the user can input the right values for these variables. For example ("$Year" & "$SomeName"):
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the $Year an unknown printer took a galley of type and scrambled it to make a type specimen book $SomeName}. It has survived not only five centuries, but also the eap into electronic typesetting, remaining essentially unchanged.
I can use a regex to find and replace the $Variable strings.
However I want to replace the strings with reactive html elements (for example ) so I can bind them to a method in my Vue component, like this:
<span @click="showVariablePopup('SomeName')">$SomeName</span>
Of course this won't work if I just replace these variable-strings with the code above and display the html like this:
<div v-html="stringWithReplacements"></div>
Is there any way i can achieve this?