Get strings from Ajax and make certain words clickable

[bjbstone]

Hi all, very new user/developer here. I’m a python back-end developer trying to learn Vue/Quasar and get solid in Javascript/ES6 all at the same time, so bear with me!

I am setting up an app that will retrieve strings (in my case, Bible verses) from an api via Ajax.

I then need to process the strings and make certain words have an @click function that produces a popup. Here is an example:

In the beginning H7225  God H430  created H1254-H853  the heaven H8064  and the earth. H776

All the references with numbers in them (ie “H7225”) need to be clickable and produce a popup that will then fetch another Ajax call retrieving data on the number.

I know how to add @click functions and create custom Vue components that will do what I need, the problem is, since I am fetching the data via Ajax, I can’t figure out how to get it done.
My plan was to do a regex search and replace in my backend to insert the vue-related HTML tags into my text, like this:

In the beginning <click-word> H7225</click-Word>  God  <click-word>H430 </click-word>…

Then I would define “click-Word” as a custom Vue component and load it into my Vue page.

However, when I data like this from Ajax, Vue doesn’t compile it into a component.
I looked briefly at an add-on called “v-runtime-template”, but so far this has only resulted in my app freezing upon returning the data from Ajax.

Is there a better or simpler way of tackling this? I’d really appreciate the help! Thanks!!

[FrankM]

It can be done with Vue.compile(), but there are certain caveats you need to be aware of. This may point you to the right direction: https://stackoverflow.com/questions/46584301/vue-components-elements-in-v-html